Question

我创建了一个灯箱，它工作正常。现在我想创建2个灯箱，我似乎无法使我的jquery正确。

2个灯箱不会同时显示。有2个链接分别打开。

<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(

jQuery灯箱

1 个答案: