在jquery中使用不同的ID自动打开弹出框

Open pop-up box automatic with different ID in jquery

本文关键字：ID jquery      更新时间：2023-09-26

这里我使用一个弹出jQuery框作为弹出窗口，但当我在同一页面上使用它作为多个弹出框时，它只是一个而不是全部，因为我在用于弹出的所有按钮上的id都相同。

<script src="js/jquery-1.9.1.js"></script>

    ;(function($) {
     // DOM Ready
    $(function() {
        // Binding a click event
        // From jQuery v.1.7.0 use .on() instead of .bind()
        $('#full-pop').bind('click', function(e) {
            // Prevents the default action to be triggered. 
            e.preventDefault();
            // Triggering bPopup when click event is fired
            $('#full-detail-box').bPopup();
        });
    });
})(jQuery);

这是弹出式

<div id="full-detail-box">this is pop up</div>

试试这个

JS

for(var i=0;i<3;i++){
    $('body').append("<div id='full-detail-box"+i+"' class='full-detail-box'>"+(i+1)+" User this is my pop-up window that is opem multi timewith different value </div><br/><a class='btn-pro' data-id='full-detail-box"+i+"' href='#'>Full Detail</a>")
}
 $('.btn-pro').bind('click', function(e) {

            e.preventDefault();
            var id=$(this).data('id');
            // Triggering bPopup when click event is fired
            $('#'+id).bPopup();
       });

而不是这个

$('#full-pop').bind('click', function(e) {
            // Prevents the default action to be triggered. 
            e.preventDefault();
            // Triggering bPopup when click event is fired
            $('#full-detail-box').bPopup();
        });

此处更新演示

如果我理解正确，你会重复传递相同的id，这只是一次又一次地打开相同的弹出窗口。如果你想要多个弹出窗口，你需要多个DOM节点来触发上的弹出窗口。

如果您正在使用用户详细信息，为什么不添加一个唯一的ID！？在PHP中，您可以很容易地在类名id="full-detail-box-xx"的末尾添加用户的ID，其中XX是用户的ID。

然后，您只需使用函数中id相同的按钮来调用用户，如$('#full-detail-' + id).click(function(){ bPopup('#full-detail-box' + id); });

如果您使用的是PHP，您可以将ID写入JS数组，或者其他什么。我不知道你们的系统是怎么设置的。

相关文章：