lightbox, css and javascript

html 페이지에 6-7 투명 팝업을 추가하고 싶습니다. 지금까지 4 개를 추가했습니다. 1과 2는 잘 작동하고 있으며, 3과 4는 링크를 누르면 팝업됩니다. 그들을 닫으려면 투명 배경이 사라지지만 중간 창은 남아 있습니다 ... 나는 HTML 코드와 CSS를 첨부 할 것입니다. (그 간단한 코드와 심지어는 잘못된 것입니다.)lightbox, css and javascript

감사합니다. 감사합니다. 모두!

코드 :

@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; 
} 

<!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 &amp; 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 &amp; 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>

출처

2012-07-28 Clau

편집기로 잘라내어 코드를 강조 표시하고 'Ctrl-k'를 누르거나 '{}'버튼을 누르십시오. –

http://meta.stackexchange.com/questions/22186/how-do-i-format-my-code-blocks –

오류는 getElementById 기능에 전달 된 것을 포함 중복 ID 속성 값에 의해 발생을 추가하는 방법에 대한 답변을 주셔서 대단히 감사합니다.

다음은 고정 된 HTML 코드입니다. 나는 ONCLICK 속성의 스크립트를 SCRIPT 블록의 두 함수로 변환하여 더 쉽게 관리하고 읽을 수있게했습니다.

<!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" /> 

     <script> 
     function doshow(num) { 
      document.getElementById('light'+num).style.display='block'; 
      document.getElementById('fade'+num).style.display='block'; 
     } 
     function dohide(num) { 
      document.getElementById('light'+num).style.display='none'; 
      document.getElementById('fade'+num).style.display='none'; 
     } 
     </script> 

    </head> 
    <body> 
<!-- BUTTONS for LogIn and Register --> 

     <a href="javascript:void(0)" onclick = "doshow(1)">Energy Efficient</a> 

     <a href="javascript:void(0)" onclick = "doshow(2)">Cost efficient</a> 

     <a href="javascript:void(0)" onclick = "doshow(3)">Sustainability &amp; Safety</a> 

     <a href="javascript:void(0)" onclick = "doshow(4)">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 &amp; 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="dohide(1)" href="javascript:void(0)"> 
      <div id="fade1" class="black_overlay1"> 
      </div> 
     </a> 

     <a onclick="dohide(2)" href="javascript:void(0)"> 
      <div id="fade2" class="black_overlay2"> 
      </div> 
     </a> 

     <a onclick="dohide(3)" href="javascript:void(0)"> 
      <div id="fade3" class="black_overlay3"> 
      </div> 
     </a> 

     <a onclick="dohide(4)" href="javascript:void(0)"> 
      <div id="fade4" class="black_overlay4"> 
      </div> 
     </a> 


<!-- Other content on the page --> 

    </body> 
</html>

출처

2012-07-30 18:08:18 Jay

답변을 주셔서 대단히 감사합니다. <3, 제발 도와주세요. 어떻게 도와 드릴까요? 모서리 중 하나에 닫기 버튼 X를 추가 하시겠습니까? 나는 그물에서 몇 가지 코드를 시도했지만 운이 없다 작동하도록, 감사합니다 – Clau

무엇을 닫으려면 버튼을? – Jay

lightbox, css and javascript

답변

관련 문제