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).find('.box').show('fast');
          });
      });

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

あなたはclosest（）とnext（）関数を探しています。また、複数のリンクがあるため、代わりにクラスを使用する必要があります。これらの線に沿った何かがあなたのために働くはずです：

$(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');
        });
    });
});

1つの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 に答える