jQuery lightbox

Question

Я создал лайтбокс, и он отлично работает. Теперь я хочу создать 2 лайтбоксов, и я не могу получить правильный jquery.

2 lightboxes не отображаются одновременно. Есть две ссылки, которые открываются соответственно.

<a href="#" class="lightbox1">Open box 1</a> 
<a href="#" class="lightbox2">Open box 2</a> 

В первой коробке есть форма и некоторый контент во втором.

HTML/CSS:

<div class="backdrop"></div> <--end of backdrop --> 

<div id="wapper" class="centered"> 

<div class="box1"> 
<div class="close">x</div> <!--Close 'x' on the lightbox--> 
<div class="clear"></div> <!--CSS clear to correct flow --> 
<form name="form1" id="form1"> 
...  
</form> 
</div> <!--end of box1--> 

<div class="box2"> 
<div class="close">x</div> <!--Close 'x' on the lightbox--> 
<div class="clear"></div> <!-- end of div clear --> 
<div id="responce"> 
</div> <!-- end of div response [This is where the content goes after its fetched from mysql]--> 
</div> <!-- end of box2 --> 

</div><!--end of wapper --> 

<style> 
.backdrop 
     { 
      position:absolute; 
      top:0px; 
      left:0px; 
      width:100%; 
      height:100%; 
      background:#000; 
      opacity: .0; 
      filter:alpha(opacity=0); 
      z-index:50; 
      display:none; 
     } 
     .box1, .box2 
     { 
      position:absolute; 
      top:20%; 
      left:30%; 
      width:500px; 
      height:300px; 
      background:#ffffff; 
      z-index:51; 
      padding:10px; 
      -webkit-border-radius: 5px; 
      -moz-border-radius: 5px; 
      border-radius: 5px; 
      -moz-box-shadow:0px 0px 5px #444444; 
      -webkit-box-shadow:0px 0px 5px #444444; 
      box-shadow:0px 0px 5px #444444; 
      display:none; 
     } 
     .close 
     { 
      float:right; 
      margin-right:6px; 
      cursor:pointer; 
     } 
</style> 

JS/JQuery:

<script type="text/javascript"> 
      $(document).ready(function(){ 

       if ($('lightbox1').click(function()) { 
     $('.backdrop,box1').animate({'opacity':'.50'}, 300, 'linear'); 
        $('box1').animate({'opacity':'1.00'}, 300, 'linear'); 
        $('.backdrop, box1').css('display', 'block'); 

       $('.close').click(function(){ 
        close_box($('.box1')); 
        }); 

        $('.backdrop').click(function(){ 
        close_box($('.box1')); 
       }); 
      } 
      else if($('lightbox2').click(function()){ 
     $('.backdrop, box2').animate({'opacity':'.50'}, 300, 'linear'); 
        $('box2').animate({'opacity':'1.00'}, 300, 'linear'); 
        $('.backdrop, box2').css('display', 'block'); 

       $('.close').click(function(){ 
        close_box($('.box2')); 
       }); 
      } 
      }); 

      function close_box(box) 
      { 
       $('.backdrop, <box>').animate({'opacity':'0'}, 300, 'linear', function(){ 
        $('.backdrop, <box>').css('display', 'none'); 
       }); 
      } 
     </script> 

Я работал над этим кодом в течение 2 дней в настоящее время, пытаясь выяснить, что случилось, может кто-то пожалуйста, помогите. Условием if является то, что дает проблему. Также кнопка закрытия не работает - как передать параметр?

Спасибо!

#

Итак, я был в состоянии получить легкую коробку, чтобы работать, JQuery/JavaScript: функция

$(document).ready(function(){ 
      $('.lightbox1').click(
      function() { 
       $('.backdrop, .box1').animate({'opacity':'.50'}, 300, 'linear'); 
       $('.box1').animate({'opacity':'1.00'}, 300, 'linear'); 
       $('.backdrop, .box1').css('display', 'block'); 

       $('.close').click(function(){ 
        close_box($(".box1")); 
       }); 

       $('.backdrop').click(function(){ 
        close_box($(".box1")); 
       }); 
      }); 

      $('.lightbox2').click(
      function(){ 
       $('.backdrop, .box2').animate({'opacity':'.50'}, 300, 'linear'); 
       $('.box2').animate({'opacity':'1.00'}, 300, 'linear'); 
       $('.backdrop, .box2').css('display', 'block'); 

       $('.close').click(function(){ 
        close_box($(".box2")); 
       }); 
      });    

     }); 

close_box() до сих пор не работает. Параметр не передается должным образом.

Answer 1

Я смущен о вашем селекторе. Вы бы не использовали $('<lightbox1>').click, а скорее $('.lightbox1').click, чтобы выбрать элемент (ы), который соответствует классу.

То же самое относится и к $('.backdrop, <box>') в вашей close_box() функции - Я предполагаю, что вы хотите использовать box как переменные, так что вы могли бы сделать $('.backdrop, ' + box).animate(