2

私は自分で基本的なモーダルを作成しようとしていますが、ここで少し問題があります（おそらく、私はjQueryを扱う専門家であるためです。真剣に受け止めないでください）。

私はこのHMTLマークアップを持っています：

<div id="modal-boxes">
    <div id="modal-updates" class="modal-content">
        Content for modal box here.
        <a href="#" class="close-modal">Close</a>
    </div>
</div>
<div id="modal-mask"></div>

そこで、モーダルボックスを閉じて#maskdivを非表示にするように指示する関数を作成しました。そしてもう1つは、外側をクリックすると、とにかく閉じます。つまり、＃modal-updates divの外側をクリックすることは、閉じるボタンをクリックすることと同じです。しかし、問題は、＃modal-updates div内をクリックしたいとき（消えてはいけない）、とにかく閉じることです。これが私のjavascriptコードです：

$(".modal").click(function(e){

    e.preventDefault(); // Cancel the default link behavior

    $("#modal-mask").fadeTo(400, 0.4);
    $("#modal-boxes").fadeIn();

    var getName = "#" + $(this).attr("name");
    $(getName).fadeTo(400, 1);
});

function closeModal() {
    $("#modal-mask, #modal-boxes").fadeOut();
}

$(".close-modal").click(function(e){
    e.preventDefault();
    closeModal();
});

$(".modal-content").click(function(){
    closeModal();
});

何か助けはありますか？

よろしく、ティアゴカストロ

4

2 に答える 2

3

試す：

$('#modal-updates').click(function(e) {
    e.stopPropagation();
});

正しく実行された場合、これは$("#modal-boxes").click()トリガーを停止します。

[編集]タイプミスを修正し、jsFiddleへのリンクを追加しました。

于 2012-04-19T23:49:03.053 に答える
0

jQueryのモーダルダイアログを使用してみませんか？

あなたの例について：

1）リンクについて私は次のようなことをするのが好きです：

<a href="javascript:void(closeMyPopup());" class="close-modal">Close</a>

そうすれば、preventDefaultやクリックイベントなどを処理する必要はありません。

2）クリックイベントを「.modal-content」にバインドする代わりに、「＃modal-mask」にバインドしたいと思います;）

于 2012-04-19T23:51:59.983 に答える