Custom Background Color for 'Open in New Window'

**SheriLynn** · 01-10-2015, 11:24 PM

I'm using this script in the head of my doc:

Code:

<script language="javascript">
/*
Auto center window script- Eric King (http://redrival.com/eak/index.shtml)
Permission granted to Dynamic Drive to feature script in archive
For full source, usage terms, and 100's more DHTML scripts, visit http://dynamicdrive.com
*/
var win = null;
function NewWindow(mypage,myname,w,h,scroll) {
LeftPosition = (screen.width) ? (screen.width-w)/2 : 0;
TopPosition = (screen.height) ? (screen.height-h)/2 : 0;
settings=
'height='+h+',width='+w+',top='+TopPosition+',left='+LeftPosition+',scrollbars='+scroll+',resizable',
win = window.open(mypage,myname,settings)
}
</script>

and this in the body:

Code:

<a href="brvig2015.jpg" onclick="NewWindow(this.href,'name','700','590','yes');return false"><img src="brvig2015t.jpg" width="122" height="98" border="0" alt="variation one" /></a>

Can I insert a code to change the background color in the new window?

Any help at all is appreciated!

**molendijk** · 01-11-2015, 10:29 AM

You can't change the css of new windows or tabs 'afterwards'.

**Beverleyh** · 01-11-2015, 11:28 AM

It looks like you are using this script to open an image in a new window. Aside from the fact that the script is really old and doesn't work on iPad/iPhone, it is also an outdated practice and one that users tend to find annoying, so I recommend going the more modern route of opening the image in a modal overlay/popup. Here is a simple example where a modal overlay/popup is triggered with the addition and removal of a div class via JavaScript (everything else is done with CSS);

Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Modal Popup</title>
 
<style>
.show { position:fixed; top:0; right:0; bottom:0; left:0; z-index:9999; text-align:center; color:#fff; background:rgb(0,0,0); background:rgba(0,0,0,.75) }
.show img { max-width:100%; max-height:100%; position:absolute; margin:0; top:45%; left:50%; 
	-webkit-transform:translate(-50%,-50%); -ms-transform:translate(-50%,-50%); transform:translate(-50%,-50%)
	}
.hide { display:none }
</style>

</head>
<body>

<a onclick="showModal('img1');">View Image</a>
<noscript><a href="path/to/image.jpg"/>View Image</a></noscript> <!-- fallback for when JS is disabled -->
<div id="img1" class="hide"><img src="path/to/image.jpg"/>[<a onclick="hideModal('img1');">x</a>]</div>

<script>
function showModal(id) { document.getElementById(id).className = 'show'; }
function hideModal(id) { document.getElementById(id).className = 'hide'; }
</script> 

</body>
</html>

Please note that this works 'as is' in modern browsers and IE9+

It 'works' in IE7/8 too but will need further modification to make the modal background semi-transparent (it is currently falling back to a solid colour), and to vertically centre the image.

The first issue can be tackled with a semi-transparent png set as a tiled (repeated) background image on the .show div.

The second issue is a little trickier and can only really be tackled if all images are the same size - you can use negative left and top margin offsets to pull the image back to centre. Alternatively, and probably an easier way if your images are of different sizes, is to position the image to the top of the .show div.

Both of these IE7/8 CSS fixes should be placed inside conditional comments for those browsers only;

Code:

<!--[if lte IE 8]>
<style>
/* styles for IE7/8 go here */
.show { background:transparent url(path/to/semi-transparent/tile.png) 0 0 repeat }
.show img { top:25px }
</style>
<![endif]-->

Possible issue: Mobile WebKit browsers (Chrome, Safari) go a little screwy with position:fixed elements when CSS transforms are applied to parent containers, so if you happen to put the modal .show divs inside anything that has any CSS3 animations/transforms applied to it, the modal overlays/popups will be fixed to the edges of the parent container instead of the whole browser window.

Possible issue: The images inside the modal overlay/popup will be downloaded on page load so make sure they're reasonably sized and optimised so that they don't have a massive negative impact on performance. Try not to have too many on a page either. If you're making a gallery, try the linked scripts below.

Something that may be of interest to you - my modal gallery freebie script http://fofwebdesign.co.uk/freebies_f...-modal-rwd.htm
That is for the CSS-only version but there are more versions as the script has developed http://fofwebdesign.co.uk/freebies_f...l-rwd.htm#prev (eg, on-demand image loading, keyboard control navigation and pagination)

**SheriLynn** · 01-11-2015, 06:03 PM

Originally Posted by molendijk

You can't change the css of new windows or tabs 'afterwards'.

Thank you for your reply. I was pretty sure that was impossible....

**SheriLynn** · 01-11-2015, 06:25 PM

Thanks, Beverleyh, I appreciate all the time and effort you put into your reply. I have been using that javascript code for 13 years and because it worked on my desktop, it was okay with me. I never considered that it didn't work for other devices.

Although I have been hand-coding my pages since Day One (that's my Zen) I still have soooo much to learn. You should have been here on the day that I learned about CSS external stylesheets and re-did my entire website!

So, since I'm using external CSS, let me see if I understand this. I would put this:

Code:

.show { position:fixed; top:0; right:0; bottom:0; left:0; z-index:9999; text-align:center; color:#fff; background:rgb(0,0,0); background:rgba(0,0,0,.75) }
.show img { max-width:100%; max-height:100%; position:absolute; margin:0; top:45%; left:50%; 
	-webkit-transform:translate(-50%,-50%); -ms-transform:translate(-50%,-50%); transform:translate(-50%,-50%)
	}
.hide { display:none }

into my stylesheet

and put this into my document head:

Code:

<!--[if lte IE 8]>
<style>
/* styles for IE7/8 go here */
.show { background:transparent url(path/to/semi-transparent/tile.png) 0 0 repeat }
.show img { top:25px }
</style>
<![endif]-->

and this into the body of my doc:

Code:

<a onclick="showModal('img1');">View Image</a>
<noscript><a href="brvig2015.jpg"/>View Image</a></noscript> <!-- fallback for when JS is disabled -->
<div id="img1" class="hide"><img src="brvig2015t.jpg"/>[<a onclick="hideModal('img1');">x</a>]</div>

<script>
function showModal(id) { document.getElementById(id).className = 'show'; }
function hideModal(id) { document.getElementById(id).className = 'hide'; }
</script>

**SheriLynn** · 01-11-2015, 06:59 PM

Beverleyh, I got most of it to work!

Here's a link to the page:

http://www.katiebuglove.com/Katies/FreeTubes/tubes.html

The picture is toward the bottom of the page.

My transparent tile isn't working and I'd like to get the links to match the style on my page.

Other than that, kudos to you! You are going to be my new guru, hope you can handle it...!

**Beverleyh** · 01-11-2015, 07:40 PM

Bear with me as I'm on iPhone at the mo. From your CSS it looks like this is your tile for the background http://www.katiebuglove.com/Katies/FreeTubes/ttile.png
I can't see anything in iPhone which I'm guessing means that the tile is a fully transparent png. That's the problem - it needs to be a *semi-transparent* image, which usually would be a png-24 format with about 70% opacity. I have a sample that I use elsewhere - it may be too 'solid' but feel free to use it if it helps http://jetta.jemcon.org/template/images/j-tile.png

As for your links, I think the reason that they aren't picking up your default style is that the ones I gave in the example are placeholder links, which is an HTML5 thing where the href attribute is omitted http://webdesign.about.com/od/html5t...lder-links.htm
Try putting in a dummy href to see if that helps;

Code:

<a href="javascript:void(0)" onclick="showModal('img1')">View Image</a>

Hope that helps

**SheriLynn** · 01-11-2015, 07:59 PM

Uh oh...something broke in my stylesheet, I got it fixed by reverting to the old without your new stuff added. But now it's time for me to burn dinner so I'll try it again tomorrow with the corrections you supplied.

Thanks again for your help!

**SheriLynn** · 01-12-2015, 02:11 AM

I got it working again. I tried your transparent tile and it looked the same. I made a new one (in pink) it looked the same....

Also, when I changed the code to:

"<a href="javascript:void(0)" onclick="showModal('img1')">View Image</a>"

it didn't work...

Thanks for all your patience and help. When I get this working, do I have my work cut out for me. I have two other websites with literally thousands of pictures using the old javascript....

**SheriLynn** · 01-12-2015, 05:33 PM

BeverleyH,

Okay, I got it fixed! The 'view image' link is now matching my link style. I only need to tweak a couple of things:

1. I'd like to center the "View Image" text under the thumbnail. Where (and how) do I do this??

2. I think the window is too big. When I view the larger image on my Kindle, the 'close window' (I changed it from the 'x') is out of view. I have to use the back key, which takes me out of my page.

3. I'd also like to tweak the style on the 'close window' link so that it matches mine.

4. Do I have to use that black transparent window? I made a beautiful transparent pink tile (xtile.png) but it is not showing up.

Hope I'm not being too picky....

Thanks for your help, I really appreciate it!