私は、最終的に半分透明な背景を持つモーダルポップアップウィンドウになるいくつかのコードをテストしています。問題は.modal-overlay、ポップアップウィンドウに表示する閉じるボタンだけでなく、背景をクリックして背景クラスを削除したいということです。背景をクリックしたときに何かが発生するかどうかを確認する2つの方法をテストしましたが、何も起こりません。私は何を間違えたり、逃したりしましたか？
jQuery：
var appendthis = ("<div class='modal-overlay modal-close'></div>");
$('#open-popup').click(function(e) {
e.preventDefault();
$("body").append(appendthis);
$(".modal-overlay").fadeTo(500, 0.7);
});
$(".modal-overlay").on("click", function(){
alert("Closing!?");
});
$(".modal-close, .modal-overlay").click(function() {
alert("Closing?");
$(".modal-overlay").fadeOut(500, function() {
$(".modal-overlay").remove();
});
});
CSS：
.modal-overlay {
opacity: 0;
filter: alpha(opacity=0);
position: fixed;
top: 0;
left: 0;
z-index: 900;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7) !important;
}
上記のコードの問題は、その時点で存在しない要素のクリックイベントハンドラーを定義していることです。また、後で作成するとき、その要素にはクリックハンドラーがアタッチされていません。
必要なことを実現するには、委任されたイベントを使用する必要があります（詳細については、jQueryのドキュメントを参照してください）。これにより、クリックイベントハンドラーが作成時に要素にアタッチされます。
$(document).on("click", "selector-for-element-created-later", function(e) { ... });
あなたのコードに適用すると、次のようになります（私はをに置き換えalertましたconfirm）：
var appendthis = ("<div class='modal-overlay modal-close'></div>");
$('#open-popup').click(function(e) {
e.preventDefault();
$("body").append(appendthis);
$(".modal-overlay").fadeTo(500, 0.7);
});
$(document).on("click", ".modal-close, .modal-overlay", function() {
if (confirm("Closing?")) {
$(".modal-overlay").fadeOut(500, function() {
$(".modal-overlay").remove();
});
}
});
/*
// or this
$(document).on("click", ".modal-overlay", function(){
alert("Closing!?");
});
*/.modal-overlay {
opacity: 0;
filter: alpha(opacity=0);
position: fixed;
top: 0;
left: 0;
z-index: 900;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7) !important;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="open-popup">Open Popup</button>この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加