0

我创建了一个灯箱，它工作正常。现在我想创建 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() 函数仍然不起作用。参数未正确传递。

4

1 回答 1

3

我对你的选择器感到困惑。您不会使用$('<lightbox1>').click而是$('.lightbox1').click选择与类匹配的元素。

$('.backdrop, <box>')你的函数也是如此close_box()- 我假设你想box用作变量，所以你会这样做$('.backdrop, ' + box).animate(

于 2012-06-11T14:50:53.293 回答