Modal windows (custom)

[HaLo2FrEeEk]

I need help with modal dialogs.  Many of you likely have been to myspace and have seen the style updates, one of which includes modal dialogs for some pages.  This page dims the screen and inserts a moidal window (a div) in the center with information, and doesn't allow you to use the rest of the page until the modal is closed.  I have a script that gives me a modal dialog right now, but if the page needs to be scrolled, it looks bad becuase the overlay div only covers the visible screen, not the entire scrollable screen, wo when you scroll down, the dimmed portion goes too, leaving the rest undimmed.  What I need help with is making it sothe whole scrollable page is dimmed, without setting specific boundaries for the div's size.  Here is the code I am using now:

 

Javascript:

function overlay(img) {
  el = document.getElementById("overlay");
  el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";
  }

 

CSS:

#overlay {
     	visibility: hidden;
     	position: absolute;
     	left: 0px;
     	top: 0px;
     	width:100%;
     	height:100%;
     	text-align:center;
     	z-index: 1000;
     	background: black;
     	filter:alpha(opacity=50);
     	-moz-opacity:0.5;
}

#overlay div {
width: 300;
     	background-color: #fff;
     	border:1px solid #000;
     	padding:15px;
     	text-align:center;
}

 

And HTML:

<img src="http://claninfectionist.com/images/oblivon_pics/HaLo2FrEeK_stripped_1.png" onclick="javascript:overlay()">
<div id="overlay">
  <div id="modal_content"><a href="" onclick="javascript:overlay();return false;">close</a></div>
</div>

 

The whole point of this is I'm making something where images larger than a set maximum width will be resized, a border will be placed around them, and they will be made clikable.  Clicking them will open the modal dialog with the full size image inside it.  If anyone could show me an easy modification to this code to make this work, I would be grateful, or really any advice is useful.  If you could tell me how to make the original page not scrollable at all, that would be even better.  Thank you in advance.

[phpQuestioner]

<script language="javascript">
function go2top() 
{
document.getElementsByTagName('body')[0].scrollTop = 0;
t=setTimeout("go2top()", 1);
}
function stop2top()
{
clearTimeout(t);
}
function overlay(img) {
  go2top();
  el = document.getElementById("overlay");
  el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";
  document.getElementsByTagName('body')[0].style.overflow='hidden';
  document.onkeypress=function() { return false; }
  }
function back2normal()
{
  stop2top();
  el = document.getElementById("overlay");
  el.style.visibility = (el.style.visibility == "hidden") ? "visible" : "hidden";
  document.getElementsByTagName('body')[0].style.overflow='auto';
  document.onkeypress=function() { return true; }
}
</script>

<style type="text/css">
#overlay {
        display:block;
     	visibility: hidden;
     	position: absolute;
     	left: 0px;
     	top: 0px;
     	width:100%;
     	height:100%;
     	text-align:center;
     	z-index: 1000;
     	background: black;
     	filter:alpha(opacity=50);
     	-moz-opacity:0.5;
}

#overlay div {
width: 300;
     	background-color: #fff;
     	border:1px solid #000;
     	padding:15px;
     	text-align:center;
}
</style>

<img src="http://claninfectionist.com/images/oblivon_pics/HaLo2FrEeK_stripped_1.png" onclick="javascript:overlay()">
<div id="overlay">
  <div id="modal_content"><a href="javascript:void(0)" onclick="javascript:back2normal()">close</a></div>
</div>

[HaLo2FrEeEk]

No, that throws some errors, it opens the modal dialog, but scrolling is completely disabled after closing it, and if I scroll halfway down the page then click an image, it opens the modal dialog at the top still, with left:0 and top:0.  If anything I just need the modal to either allow scrolling but have the actual dialog part always center itself (trying to stay away from that, becuase it makes the page jumpy), or have scrolling disabled while the modal is opened, or have the background dimmed part just repeat for the whole page, but I don't know how to do that.

[phpQuestioner]

I do not get errors - it works fine for me - I just finished updating it (I have been doing so since I posted my reply, because it did not work like I wanted it to; but now it works fine). Try the code again - it has been revised.

 

it opens the modal dialog, but scrolling is completely disabled after closing it

 

Yeah, that's what I had to fix.

 

if I scroll halfway down the page then click an image, it opens the modal dialog at the top still

 

The script is designed to do so; this helps to prevent any type of scrolling (including mousewheel). you could set the document.getElementsByTagName('body')[0].scrollTop offset based on the y-coordinates location of your image; that might be a good workaround for you issue with this.

 

If my script does not work the way you want it to; you should do a Google search for "Lightboxes" not modal windows - you will get more results that way.

[HaLo2FrEeEk]

The scrolling is still disabled after closing the box.  I guess I'll go to google.  I saw the lightbox that microsoft was using when you visit their site (to install silverlight) and I loved it, I wanted to use it, but I can never make heads or tails of MS's code.

[phpQuestioner]

The scrolling is still disabled after closing the box.

 

the reason you think the scrolling is disable is because you do not have enough code in your page the make the scrollbars overflow. the scrolling is perfectly enabled after you close the box in FFv2.0.0.4 and IE7.

 

try this example:

 

<script language="javascript">
function go2top() 
{
document.getElementsByTagName('body')[0].scrollTop = 0;
t=setTimeout("go2top()", 1);
}
function stop2top()
{
clearTimeout(t);
}
function overlay(img) {
  go2top();
  el = document.getElementById("overlay");
  el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";
  document.getElementsByTagName('body')[0].style.overflow='hidden';
  document.onkeypress=function() { return false; }
  }
function back2normal()
{
  stop2top();
  el = document.getElementById("overlay");
  el.style.visibility = (el.style.visibility == "hidden") ? "visible" : "hidden";
  document.getElementsByTagName('body')[0].style.overflow='auto';
  document.onkeypress=function() { return true; }
}
</script>

<style type="text/css">
#overlay {
        display:block;
     	visibility: hidden;
     	position: absolute;
     	left: 0px;
     	top: 0px;
     	width:100%;
     	height:100%;
     	text-align:center;
     	z-index: 1000;
     	background: black;
     	filter:alpha(opacity=50);
     	-moz-opacity:0.5;
}

#overlay div {
width: 300;
     	background-color: #fff;
     	border:1px solid #000;
     	padding:15px;
     	text-align:center;
}
</style>

<img src="http://claninfectionist.com/images/oblivon_pics/HaLo2FrEeK_stripped_1.png" onclick="javascript:overlay()">
<div id="overlay">
  <div id="modal_content"><a href="javascript:void(0)" onclick="javascript:back2normal()">close</a></div>
</div>

<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>

 

but if you want someone else's lighbox - then go for it

[HaLo2FrEeEk]

I tried your example (had to add a bunch more line breaks, cuz I'm using 1920x1200 resolution) but it worked.  I took your advice and used the scroll offset y to set the overlay div's top coordinate to the y offset, but the scrolling issue remains, I think I'll use part of your code to disable that.  Thank you so much for your help.