多个按钮可单独控制弹出窗口

Question

我在寻找创建弹出窗口的方法时发现了这段代码，它确实有效，但我试图弄清楚如何使它与多个动态创建的 div 一起工作。

function popupOpenClose(popup) {

/* Add div inside popup for layout if one doesn't exist */
if ($(".wrapper").length == 0){
    $(popup).wrapInner("<div class='wrapper'></div>");
}

/* Open popup */
$(popup).show();

/* Close popup if user clicks on background */
$(popup).click(function(e) {
    if ( e.target == this ) {
        if ($(popup).is(':visible')) {
            $(popup).hide();
        }
    }
});

/* Close popup and remove errors if user clicks on cancel or close buttons */
$(popup).find("button[name=close]").on("click", function() {
    if ($(".formElementError").is(':visible')) {
        $(".formElementError").remove();
    }
    $(popup).hide();
});
}

$(document).ready(function () {
    $("[data-js=open]").on("click", function() {
        popupOpenClose($(".popup"));
    });
});

我希望能够使用多个按钮来控制单个 div，例如 id 为“pop1”的按钮将打开 div“popup1”，id 为“pop2”的按钮将打开 id 为“popup2”的 div 等。

<button id="pop1">Open popup</button>
<button id="pop2">Open popup</button>

<div id="popup1" class="popup">
    <h2>This is my popup 1</h2>
    <button name="close">Close popup</button>
</div>
<div id="popup2" class="popup">
    <h2>This is my popup2</h2>
    <button name="close">Close popup</button>
</div>

我使用 php 动态创建按钮和 div，因此没有设置数量，我想确保无论生成多少它们都能正常工作。对于每个新的 div，它都会增加 id 上的数字，就像您在上面看到的那样。

我尝试这样做，但按钮将打印所有可用 div 中的所有内容，因为我没有单独定位它们。我无法弄清楚那部分。

$(document).ready(function () {
    $("button[id*=pop]").on("click", function() {
        popupOpenClose("[id*=popup]");
    });
});

有人有什么建议吗？谢谢。

Answer 1

我已经对您的 html 进行了一些更改，因为这样很容易获取元素

<button id="pop_1" class="btnpopUpOpen">Open popup</button>
<button id="pop_2" class="btnpopUpOpen">Open popup</button>

<div id="popup_1" class="popup">
<h2>This is my popup 1</h2>
<button name="close">Close popup</button>
</div>
<div id="popup_2" class="popup">
   <h2>This is my popup2</h2>
<button name="close">Close popup</button>
</div>

jQuery 代码：

$("button.btnpopUpOpen").on("click", function(e) {
e.preventDefault();
var myID=$(this).prop('id').split('_')[1];
 popupOpenClose('div.popup_'+myID);
});

$("form button[name=close]").off().on('click',function(e){
e.preventDefault();
 if ($(".formElementError").is(':visible')) {
    $(".formElementError").remove();
}
$(this).parent().hide();
});

注意：如果您尝试在页面加载后动态添加 div。请务必同时重新注册您的事件