2

我有一个使用 css/html/jquery 的基本覆盖设置，它是这样的：

<a class="activator" id="activator" style="" href="#">hello</a>

<div class="overlay" id="overlay" style="display:none;"></div>
<div style="display: none;" class="box" id="box">
     <a class="boxclose" id="boxclose">X</a>
      <iframe src="http://url" style="position: absolute; top: 0px; right: 0px; left: 0px; bottom: 0px;"></iframe>
</div>

     <script type="text/javascript" src="http://goo.gl/LKdBi"></script>
     <script type="text/javascript">
        $(function() {
            $('#activator').click(function(){
                $('#overlay').fadeIn('fast',function(){
                    $('#box').show('fast');
                });
            });


            $('#boxclose').click(function(){
                $('#box').hide('fast',function(){
                    $('#overlay').fadeOut('fast');
                });
            });

        });
    </script>

这允许单击的链接打开一个简单的覆盖，可以通过单击 X 来关闭该覆盖。

我的问题是，我希望有多个链接可以点击打开自己的叠加层或使用相同的链接（我认为使用相同的 iframe 是可行的）。对于我正在尝试的东西，有没有更简单的方法？除了对我拥有的每个不同链接进行单独调用之外，我还无法弄清楚。

编辑：

理想情况下，我会有 5 个左右的链接，每个链接在单击时都会打开覆盖并显示它指向的 url。然后可以通过单击背景或“X”来关闭覆盖。

谢谢

4

2 回答 2

1

您正在寻找最接近的（）和下一个（）函数。此外，由于您将有多个链接，因此您将需要使用类。这些方面的东西应该适合你：

$(function() {
    $('.activator').click(function(){
        $(this).next('.overlay').fadeIn('fast', function(){
            $(this).next('.box').show('fast');
        });
    });


    $('.boxclose').click(function(){
        $(this).closest('.box').hide('fast',function(){
            $(this).closest('.overlay').fadeOut('fast');
        });
    });
});

因为你只想要一个 iframe 和覆盖。这是一个适合您的简化版本：

HTML：

<a class="activator" href="http://www.google.com/">hello</a>
<a class="activator" href="http://www.bing.com/">hello</a>

<div class="overlay" style="display:none;"></div>
<div class="box" style="display: none;">
    <a class="boxclose">X</a>
    <iframe class="frame" style="position: absolute; top: 0px; right: 0px; left: 0px; bottom: 0px;> </iframe>
</div>

Javascript：

$(function() {
    $('.activator').click(function(e){
        e.preventDefault();
        $('.frame').attr("src", this.href);

        $('.overlay').fadeIn('fast', function(){
            $('.box').show('fast');
        });
    });


    $('.boxclose').click(function(){
        $('.box').hide('fast',function(){
            $('.overlay').fadeOut('fast');
        });
    });
});

现场演示

于 2012-08-18T18:02:14.820 回答
1

您可以使用以下类：

$(function() {
      $('.activator').click(function(){
          $(this).next('.overlay').fadeIn('fast',function(){
             $(this).find('.box').show('fast');
          });
      });

      $('.boxclose').click(function(){
          $(this).parent().hide('fast',function(){
              $(this).closest('.overlay').fadeOut('fast');
          });
      });
});
于 2012-08-18T18:02:59.607 回答