Hi.

I'm attempting to create a modal dialogue for a site I maintain. The goal is, when the user clicks a link to read an article or posted review, a modal dialogue appears to display the text and related images, with links at the bottom to access other related pages (i.e., bibliography, etc.).

Now, I'm quite new at trying to figure out this modal window business, so be kind. ;) But I'm primarily concerned whether I'm executing this properly.

Additionally, I've disabled scrolling when the modal appears to prevent the user from going further down the main page, but when the modal is 'closed,' the page is at the top. My concern is if the list of links grows longer and one at the bottom is clicked, the user's place is lost - and I don't want that.

The HTML:

  <!-- This is placed inline -->
<a href='#' onclick='overlay()' <?php $entitled="particle.php"; ?>>Article Title</a>

  <!-- This is at the very end of the page, right before the html tag is closed -->

  <div id="overlay">
       <div>
        <iframe id="modalPop" src="<?php echo $entitled; ?>">

    </iframe>


       </div>
  </div>

The CSS:

#overlay {
     visibility: hidden;
     position: absolute;
     left: 0px;
     top: 0px;
     width: 100%;
     height: 100%;
     z-index: 1000;
     background-image: url(back-trans2.png);

}

#overlay div {
  width:66%;
  height: 75%;
  margin: 100px auto;
  padding: 8px;
  background: #A3A3A3;
  -webkit-border-radius: 25px;
  -moz-border-radius: 25px;
  border-radius: 25px;
  font-size: 1em;
  font-family: Verdana;
  color: #3B3B3B;
  text-align: center;

}

iframe {
  overflow-y: auto;
  width: 98%;
  height: 98%;
  border: 0;
}

The Java Script

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

  if (el.style.visibility == "visible") {
    document.body.style.overflow = "hidden";
  }
  else {
    document.body.style.overflow = "auto";

  }

}

Thanks!