Jump to content

clau

Members
 View Profile  See their activity

  • Posts

    1

  • Joined

  • Last visited

clau's Achievements

Newbie

Newbie (1/7)

0

Reputation

  1. clau
    I would like to add 6-7 transparent popups on a html page, I added 4 until now 1 and 2 are working fine, 3 and 4 do popup when I press the link but after that if I wanna close them the transparent background disappear but the middle window remain... I tried to fix it for hours with no results, maybe someone can see the mistake or error ((I appreciate all the HELP thank you! <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html> <head> <title> Simple lightBox effect with css and javascript </title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body><!-- BUTTONS for LogIn and Register --> <a href="javascript:void(0)" onclick = "document.getElementById('light1').style.display='block';document.getElementById('fade').style.display='block'">Energy Efficient</a> <a href="javascript:void(0)" onclick = "document.getElementById('light2').style.display='block';document.getElementById('fade').style.display='block'">Cost efficient</a> <a href="javascript:void(0)" onclick = "document.getElementById('light3').style.display='block';document.getElementById('fade').style.display='block'">Sustainability & Safety</a> <a href="javascript:void(0)" onclick = "document.getElementById('light4').style.display='block';document.getElementById('fade').style.display='block'">Time Saving</a><!-- LOG IN FORM - WRITE DOWN HERE --> <div id="light1" class="white_box" style="position: absolute; left: 607px; top: 120px; width:630px; height:560px"> <p>Energy Efficient</p> </div> <div id="light2" class="white_box" style="position: absolute; left: 607px; top: 120px; width:630px; height:560px"> <p>Cost efficient</p> </div> <div id="light3" class="white_box" style="position: absolute; left: 607px; top: 120px; width:630px; height:560px"> <p>Sustainability & Safety</p> </div> <div id="light4" class="white_box" style="position: absolute; left: 607px; top: 120px; width:630px; height:560px"> <p>Time Saving</p> </div><!-- Javascript for hidding div with LogIn form and the fade effect with it --> <a onclick="document.getElementById('light2').style.display='none';document.getElementById('fade').style.display='none'" href="javascript:void(0)"> <div id="fade" class="black_overlay1" onclick = "document.getElementById('light1').style.display='none';document.getElementById('fade').style.display='none'"> </div> </a> <a onclick="document.getElementById('light2').style.display='none';document.getElementById('fade').style.display='none'" href="javascript:void(0)"> <div id="fade" class="black_overlay2" onclick = "document.getElementById('light2').style.display='none';document.getElementById('fade').style.display='none'"> </div> </a> <a onclick="document.getElementById('light2').style.display='none';document.getElementById('fade').style.display='none'" href="javascript:void(0)"> <div id="fade" class="black_overlay3" onclick = "document.getElementById('light3').style.display='none';document.getElementById('fade').style.display='none'"> </div> </a> <a onclick="document.getElementById('light2').style.display='none';document.getElementById('fade').style.display='none'" href="javascript:void(0)"> <div id="fade" class="black_overlay4" onclick = "document.getElementById('light4').style.display='none';document.getElementById('fade').style.display='none'"> </div> </a><!-- Other content on the page --> </body></html> @CHARSET "ISO-8859-1";/* This is a style of dim effect onClick on Register or Log in button - it's the transparent background*/.black_overlay1, .black_overlay2, .black_overlay3, .black_overlay4{ display: none; position: fixed; top: 0%; left: 0%; width: 100%; height: 100%; background-color: black; z-index:1001; -moz-opacity: 0.8; opacity:.80; filter: alpha(opacity=80);} /* This is a style for log in and registration form */.white_box { display: none; position: absolute; top: 25%; left: 25%; width: 50%; height: 50%; padding: 16px; border: 5px solid #ffffff; background-color: #cee9ad; z-index:1002; overflow: auto;}
×
×
  • Create New...