Open pop-up box automatic with different ID in jquery

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>

you want multiple pop up boxes? How many pop up boxes do you want? — Will Newton, Apr 08 '14 at 04:55
you can use query to create other divs for your other popups. In other words, don't hard-code the divs, but make them programmatically… http://stackoverflow.com/questions/268490/jquery-document-createelement-equivalent — Will Newton, Apr 08 '14 at 05:05
@Kiranramchandran this is jsfiddle http://jsfiddle.net/sac050/3nLYs/ — Sam, Apr 08 '14 at 05:08
@WillNewton see my jsfiddle http://jsfiddle.net/sac050/3nLYs/2/ and here i use pop-up box multitime with same id but this is not work — Sam, Apr 08 '14 at 05:16
@WillNewton here i use php while loop for automatic generate new div so i use one id,i use it for show different user detail, i want use pop-up box different with different value like when in button it show first user detail and when i click on second button it show second user detail — Sam, Apr 08 '14 at 05:26
You should never reuse the same ID on a page. Use class names. — WASasquatch, Apr 08 '14 at 05:28
@JordanThompson i try it but this not properly work you hoave any solution for this — Sam, Apr 08 '14 at 05:31

Kiranramchandran · Accepted Answer · 2014-04-08T06:29:01.233

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

edited Apr 08 '14 at 06:29

answered Apr 08 '14 at 05:33

Kiranramchandran

2,094
16
30

thanks dude but it it show same value for both button when i click 2 button it show 2nd user detail not show 1st user detail i use this for show user detail with pop-up – Sam Apr 08 '14 at 05:43
thanks a lot dude but can i automatic generate div here like full-detail-box, full-detail-box1, full-detail-box2, full-detail-box3, and many times – Sam Apr 08 '14 at 06:15
html added dynamically at document ready in a for loop $('body').append("
"+(i+1)+" User this is my pop-up window that is opem multi timewith different value

Full Detail") – Kiranramchandran Apr 08 '14 at 06:59
but it is show same detail for all user, i want show different detail with help of php – Sam Apr 09 '14 at 04:44
well i'm not an expert in php.. i just show you the sample javascript code to do this. you can append the content dynamically in the div by taking it from database. – Kiranramchandran Apr 09 '14 at 05:02

score 0 · Answer 2 · answered Apr 08 '14 at 05:23

0

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.

answered Apr 08 '14 at 05:23

moliveira

798
8
17

how i do this @moliveira – Sam Apr 08 '14 at 05:31
You could create the popup elements programmatically as Will Newton suggested above. I think something like $("
this is pop up
").bPopup(); would work - but that is only one of many ways to accomplish that. The important part is that you are calling the popup function on different dom elements each time. – moliveira Apr 08 '14 at 05:44

score 0 · Answer 3 · answered Apr 08 '14 at 05:49

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.

Open pop-up box automatic with different ID in jquery

3 Answers3