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

Question

Here I use a pop-up jQuery box for pop up window but when I use it on same page for multiple pop-up boxes then it only one not for all because my id is same on all button I use for pop-up.

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

and here is pop-up

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

Answer 1

Try This

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

       });

Instead Of this

$('#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

If I understand correctly you are passing the same id repeatedly, which just opens the same popup over and over again. If you want multiple popups you need multiple DOM nodes to trigger a popup on.

Answer 3

If you are using user detail, why not just append a unique ID!? You can easily add, in PHP, or w/e the ID of the user at the end of the class name id="full-detail-box-xx" where XX is the ID of the user.

Then you simply use the button with the SAME id in the function to call the user, like $('#full-detail-' + id).click(function(){ bPopup('#full-detail-box' + id); });

If you are using PHP you can write the ID to a JS array, or something. I'm not sure how you system is set up.