I have some JavaScript code that adds a 'popup' window to a page upon the click of an image. I am attempting to use the 'clicked' image to serve as the background image of the popup window.
I am able to create the popup window however passing the route to be used as a background is proving problematic. Here is a synopsis of my code:
//Get an array of photo images from the page
var _photos = document.querySelectorAll(".gallery_pix");
// Loop through the resulting array
for(var i = 0; i < _photos.length; i++){
_photos[i].addEventListener("click", function() {
var _img_select = this.src;
var _img_id = this.id;
var _splits = _img_id.search("_"); //return the position of the FIRST "underscore ('_')
var _pix_name = _img_id.substring(_splits + 1);
//return the 'name' of the clicked image
//Create a 'popup' window...
var generator=window.open('','name','height=400,width=500');
generator.document.write('<html><head><title>Popup</title>');
generator.document.write('<link rel="stylesheet" href="style.css">');
generator.document.write('</head><body>');
generator.document.write("<div>");
generator.document.write("<h1>Out with the old, in with the new!</h1>");
generator.document.write("</div>");
generator.document.write('</body></html>');
generator.document.close();
var sheet = generator.document.createElement('style')
sheet.innerHTML = "div {border: 2px solid black; background-image: _img_select; background-color: blue;}";
generator.document.body.appendChild(sheet);
Essentially the issue is that the variable containing the full route of the 'clicked' image ("_img_select") cannot be passed as the source for the 'background-image' for the 'body' tag of the popup window. How can I correct this? I thank you in advance. Regards.
question from:
https://stackoverflow.com/questions/65906656/add-a-background-image-for-a-popup-created-with-document-write 与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
