Setting background color on popup window with javascript?

[IronWing]

I have the following code that creates a popup window to show image.jpg when the reader clicks on tn_image.jpg. I would like to set the the background color of the popup window.

<a href="javascript:;" onClick="w = window.open('image.jpg','TpWebWizImage','width=1500,height=1051,menubar=no,resizable=yes,scrollbars=yes,status=no,toolbar=no'); w.resizeTo(1557,1141); w.focus()" style="cursor:hand">
<img src="tn_image.jpg" border="0" width="300" height="210" alt="image.jpg" />

I've tried adding background-color: #00000 and bgcolor:black to the style statement but it gets ignored. Any ideas how to set the background color? Thanks.

Edit: upon further reading it seems that to change the background color of the popup I have to put the image inside a document so I can change the document's background color.

 

[Ken g6]

First, you are opening a window linking directly to the image. You could open a window to a web page that contains an img tag with the image.

Second, why open a true pop-up window? They make libraries for this kind of thing.

 

[IronWing]

The Lightbox and Modal scripts pre-load all the images. I have about a hundred images to show (150MB) so I'd rather not pre-load them, hence the popup script. You're right that I would have to dynamically create a webpage to contain an image. I used to know how to do that but haven't played with it in over a decade. I'll have to review my old scripts and see what I can salvage.

 

[Ken g6]

The Lightbox and Modal scripts pre-load all the images.

Are you sure about that? I don't see that happening with the Lightbox2 demo. https://www.lokeshdhakar.com/projects/lightbox2/

 

[IronWing]

That one is different than the one I found on www schools. I'll take a closer look at it. Thanks.

 

[purbeast0]

What you are doing and what you are asking are two different things.

Your code is just opening another browser window.

But from what you are saying you want, it sounds like you want to popup a modal on the current page that just displays the image, similar to the example Ken provided.

 

[IronWing]

What you are doing and what you are asking are two different things.

Your code is just opening another browser window.

But from what you are saying you want, it sounds like you want to popup a modal on the current page that just displays the image, similar to the example Ken provided.

The lightbox Ken provided should work well (Thanks Ken!). I wanted the popup because I wanted readers to have the ability to resize the images. The behavior of the popups is inconsistent across browsers so the lightbox looks like a better bet overall. Ideally the modal would open and then users could choose to make the image fullsize (extending beyond the viewport with scrollbars) but the script is set up to either size the image to the viewport or render it fullsize, but not both. If you have thoughts on how to modify the script to allow resizing the image by the user, that would make it perfect.