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。请务必重新注册您的活动

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

1 个答案: