Modal window on webpage

qvfps
qvfps used Ask the Experts™
on
I want to put a pop up window on which I can display some information when a button or check box is selected on a web page.   I created a simple test page which displays a modal window when a button is clicked.  On this page everything works as expected.  (testpage1.php)

I then tried to add this to a more complex page with multiple layers, each displaying different information.   On this page the modal window is visible on page load but it wraps around and does not display any border.   If I enclose the whole page in a div tage only part of the modal is displayed.   If I dont use the DIv around the whole page more of the modal is displayed but it still wraps and does not have the border.    (testpage2.php)

Can anyone see what I have done wrong?

The web server is running on Open-SUSE using Apache and I am viewing the page using Firefox.
testpage1.php
testpage2.php
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Commented:
I found the following example [link removed] which is working for me.  


.black_overlay {
  display: none;
  position: absolute;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
  background-color: black;
  z-index: 1001;
  -moz-opacity: 0.8;
  opacity: .80;
  filter: alpha(opacity=80);
}
.white_content {
  display: none;
  position: absolute;
  top: 25%;
  left: 25%;
  width: 50%;
  height: 50%;
  padding: 16px;
  border: 16px solid orange;
  background-color: white;
  z-index: 1002;
  overflow: auto;
}

document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'


<div id="light" class="white_content">
text
</div>

Open in new window

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial