Javascript 多个按钮分别控制弹出窗口

我在寻找创建弹出窗口的方法时发现了这段代码，它确实可以工作，但我正试图找出如何使它与多个动态创建的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"));
    });
});

---

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

我对您的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>

---

注意：如果您试图在页面加载后动态添加div，请确保重新注册您的事件

我也可以看到您的动态添加div代码吗？这只是一个foreach循环。基本上$increment=$increment++；foreach（$buttonDiv作为$data）{echo'button'；echo'stuff'；很抱歉，这只是一个快速的草率类型。我只是从mysql中提取值，并在IDS上添加一个增量。好吧，所以你试图在加载页面后在运行时添加这些div，对吗？我只是想弄清楚如何以任何方式让button 1目标div 1和button 2目标div 2等等因此，如果我有20个按钮和20个div，我希望每个按钮都控制匹配的div。button id=“1”使div id“1”弹出窗口等。这是我找到的原始代码。我只是想把它修改一下。我似乎无法让它正常工作，不知道为什么，我对javascript不太了解。我稍后会尝试更多地检查它，并尝试找出它。非常感谢您的帮助。它至少应该在逻辑上正常工作。如果可能的话，不会我会发送整个代码，我会帮你查找。。。

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

<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>

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