Custom Background Color for 'Open in New Window'

[Beverleyh]

1. To centre the "View Image" link, you can give it a class, then target in your stylesheet and apply display:block; text-align:center;

2. The font-size is a side-effect of your website not being responsive. Amongst other things, your site isn't using a <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" /> metatag, and you are using explicit pixel units when sizing your fonts, which don't translate so well when adapting to different devices/viewports (or rather, they *don't* adapt), so the "Close Window" text will remain the same as the rest of your text unless you increase it manually. If you'd like to try that, give it a class, then target in your stylesheet with a much bigger font-size. BUT, this will lead to vastly disproportionate font-sizes when compared to the other text on your site, so what I suggest doing instead, is making the whole of the modal overlay/window into a "click to close" trigger. To do that, give the "Close Window" link a class, then target it in your stylesheet and apply these additional styles; width:100%; height:100%; display:block; position:absolute;

BTW, the modal overlay is picking up some top and bottom margin overrides from default div styling that exists elsewhere in your stylesheet, so you might want to add margin:0; to the .show div CSS to make it sit flush with the top and bottom of the screen.

3. Superseded by number 2?

4. Yep, use your own tile image (for IE7/8) if you wish. You will also need to change the RGB background values against the .show div CSS to match. As a starting point, try background:rgb(255,204,204); background:rgba(255,204,204,.75);. (.75 is the degree of opacity).

[SheriLynn]

It had already occurred to me to give the view link a class, thanks for confirming that for me!

Everything is now resolved, except No 2. I added: div.close { width:100%; height:100%; display:block; position:absolute; } to my stylesheet.

But I'm not sure where to insert the code. I tried putting it in:

<div id="img1" class="hide"><img src="http://www.katiebuglove.com/Katies/FreeTubes/brvig2015.jpg"/>[<a onclick="hideModal('img1');"><div class="close">Close Window</a>]</div></div>

but that didn't work.

Other than that, looking good thanks to you!

[Beverleyh]

The styles for number 2 would need to go on the link tag - no additional div needed - the link is what we're making full screen;

<div id="img1" class="hide"><img src="http://www.katiebuglove.com/Katies/FreeTubes/brvig2015.jpg"/><a onclick="hideModal('img1');" class="close">Close Window</a></div>

Also delete the square brackets. And you'll probably want to either delete or style the "Close Window" text some more too.

[SheriLynn]

And you'll probably want to either delete or style the "Close Window" text some more too.

I put the class-close in the right place. But I don't understand, I should 'delete' or 'style' the close window text? How so? Are you talking about the hover link in the new window?

[Beverleyh]

Don't forget to check your changes - you still have the .close CSS applied to the now-deleted div. The .close class is now on the anchor tag so your CSS will need to be updated.

And just apply any further styling to that anchor tag to suit your site. Or delete the "Close Window" text, but it's up to to you what you want to do with that.

[SheriLynn]

Don't forget to check your changes - you still have the .close CSS applied to the now-deleted div. The .close class is now on the anchor tag so your CSS will need to be updated.

And just apply any further styling to that anchor tag to suit your site. Or delete the "Close Window" text, but it's up to to you what you want to do with that.

I'm not sure where the .close CSS is that I have to update. Where is the anchor tag?

Also, I was so confident about this that I applied the new window to some other pages with multiple images:

http://www.katiebuglove.com/Tutorials/platetut.html

with this code:

<td class="four"><div class="img"><img src="ex1t.jpg"></div>
<a href="javascript:void(0)" onclick="showModal('img1')">View Image</a>
<noscript><a href="ex1.jpg"/>View Image</a></noscript> <!-- fallback for when JS is disabled -->
<div id="img1" class="hide"><img src="ex1.jpg"/><a onclick="hideModal('img1');" class="close">Close Window</a></div>

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

<td class="four"><div class="img"><img src="ex2t.jpg"></div>
<a href="javascript:void(0)" onclick="showModal('img1')">View Image</a>
<noscript><a href="ex2.jpg"/>View Image</a></noscript> <!-- fallback for when JS is disabled -->
<div id="img1" class="hide"><img src="ex2.jpg"/><a onclick="hideModal('img1');" class="close">Close Window</a></div>

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

<td class="four"><div class="img"><img src="ex3t.jpg"></div>
<a href="javascript:void(0)" onclick="showModal('img1')">View Image</a>
<noscript><a href="ex3.jpg"/>View Image</a></noscript> <!-- fallback for when JS is disabled -->
<div id="img1" class="hide"><img src="ex3.jpg"/><a onclick="hideModal('img1');" class="close">Close Window</a></div>

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

but all the new window pictures are the same (image one). My guess is the change "showModal('img1'" to 2 and 3. Would this be correct?

[Beverleyh]

Let's review what you posted;

<div id="img1" class="hide"><img src="http://www.katiebuglove.com/Katies/FreeTubes/brvig2015.jpg"/>[<a onclick="hideModal('img1');"><div class="close">Close Window</a>]</div></div>

along with this in you stylesheet;

div.close { width:100%; height:100%; display:block; position:absolute; }

I replied and changed your markup to this, removing the extra div and putting the class on the anchor tag instead;

<div id="img1" class="hide"><img src="http://www.katiebuglove.com/Katies/FreeTubes/brvig2015.jpg"/><a onclick="hideModal('img1');" class="close">Close Window</a></div>

So now, your CSS doesn't work because it's looking for a div with the .close class - you need to update it for the anchor tag. Just to clarify, an anchor tag is a tag that begins with <a ... - also called a link/hyperlink.

but all the new window pictures are the same (image one). My guess is the change "showModal('img1'" to 2 and 3. Would this be correct?

Yes

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

opens

<div id="img1" class="hide"><img src="pic1.jpg"/><a onclick="hideModal('img1');" class="close">Close Window</a></div>

And

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

opens

<div id="img2" class="hide"><img src="pic2.jpg"/><a onclick="hideModal('img2');" class="close">Close Window</a></div>

and you only need

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

ONCE at the bottom of your web page.

BTW - are you aware of the official "thanks" buttons on the bottom left corner of all posts? If you're finding these replies helpful, it would be great if you could show your thanks officially

[SheriLynn]

Yes, I saw the "thanks" button but thought that was for when the thread was completed. Will pay closer attention.

My code does look like this now: <div id="img1" class="hide"><img src="http://www.katiebuglove.com/Katies/FreeTubes/brvig2015.jpg"/><a onclick="hideModal('img1');" class="close">Close Window</a></div>

I'm going to get busy and change the other pages now.

[SheriLynn]

Okay, everything is fixed, and here's the correct link to a page with multiple images to view in new window:

http://www.katiebuglove.com/Tutorial...urtaintut.html

I love this new thing you taught me and I'm so grateful for all your patience. Post back so I can thank you!

[Beverleyh]

Hi again - there are just a few small edits to make for the IE7/8 styles to help the image centre in those bowsers;

.show img { position:static; display:block; margin:25px auto }

And to wrap up, for anyone else following this thread, here's a full working demo: http://fofwebdesign.co.uk/template/_...odal-popup.htm