Sam Sam - 7 months ago 14
Javascript Question

Open pop-up box automatic with different ID in jquery

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

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