0

現時点では、私はjavascriptを学んでいるだけで、ここからどこへ行くべきかについて少し混乱しているので、ここでいくつかの助けを借りて行うことができます. jqueryを使用したモーダルのあるサイトがあります。画像をクリックすると表示されますが、他の場所をクリックしてもオフになりません。トグルを試してみましたが、どこをクリックしてもオンとオフが切り替わります。私は非表示を試みましたが、それはまったく機能しません（リンクをクリックしても非表示機能を適用すると仮定します）これまでのところ、どんな助けも素晴らしいでしょう...

jQuery('#youtube').click(function(){
jQuery('#youtubemodal').show();
});
4

3 に答える 3

0

このための独自の回避策を考え出しました。この回避策では、不透明度40％の暗い背景のdivを設定しました。これは、モーダルが読み込まれたときにページ全体に表示されます。

#modalbackground {
width:100%;
height:100%;
background-image: url('images/modalbackground.png');
background-repeat: repeat;
position:fixed;
z-index:600;
display:none;

}

次に、このdivをすべての外に配置して、ページ全体をカバーするようにします

<div id="modalbackground"> </div>

次に、このコードを適用して、新しい暗い「背景」をクリックしたときにdivとモーダルが確実に閉じるようにしました。

jQuery('#youtube').click(function(){
jQuery('#youtubemodal').show();

});

jQuery('#youtube').click(function(){
jQuery('#modalbackground').show();

});

jQuery('#modalbackground').click(function(){
jQuery('#modalbackground').hide();
});

jQuery('#modalbackground').click(function(){
jQuery('#youtubemodal').hide();
});
于 2012-09-17T10:09:43.080 に答える
0

これがあなたがする必要があることです：

$('#youtube').click(function(){
    $('#youtubemodal')
        .show()
        .on("click", function(e){
            e.stopPropagation();
        });
    $(document).on("click.youtubemodal", function(){
        $(this).off(".youtubemodal");
        $('#youtubemodal').hide();
    });
});​

これがどのように動作するかです：

  • 画像をクリックすると、モーダルが表示されます
  • モーダルが表示されたら、リスナーを追加して、どこかdocumentをクリックするとモーダルが非表示になるようにします（リスナーも削除されます）。
  • モーダルが表示されたら、リスナーも追加します。そのため、モーダルをクリックしても非表示になりません。モーダルは、モーダルの外側をクリックした場合にのみ非表示になります。

注：jQuery 1.7以降を使用していない場合は、に置き換えてください.on()。.bind().off().unbind()

于 2012-09-17T08:27:00.750 に答える
0

表示されている youtubemodal をチェックして非表示にする関数を作成します。

$("document").click(function() {
    if( $('#youtubemodal').is(':visible') ) {
        $('#youtubemodal').hide();
    } 
});
于 2012-09-17T08:20:41.243 に答える