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

Question

在这里，我使用一个弹出式 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>

Answer 1

尝试这个

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();

        });

在这里更新演示

Answer 2

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

Answer 3

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

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

如果您使用的是 PHP，您可以将 ID 写入 JS 数组或其他内容。 我不确定你的系统是如何设置的。