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

        });

<强> UPDATED DEMO HERE

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数组或其他内容。我不确定你的系统是如何设置的。

在jquery中自动打开具有不同ID的弹出框

3 个答案: