bpopup multiple

Question

I'm using a lightweight jQuery popup plugin called 'bPopup'. I'm using it on my website at the moment to load multiple popup windows when clicked. I was recently told that my code was inefficient as I was loading multiple popups with multiple JavaScript 'listeners', i.e.:

<script type="text/javascript">
;(function($) {
    $(function() {
        $('#my-button_1').bind('click', function(e) {
            e.preventDefault();
            $('#element_to_pop_up_32754925023').bPopup();
        });
    });
})(jQuery);
</script>

<script type="text/javascript">
;(function($) {
    $(function() {
        $('#my-button_2').bind('click', function(e) {
            e.preventDefault();
            $('#element_to_pop_up_95031153149').bPopup();
        });
    });
})(jQuery);

^^ The multiple JavaScript 'listeners'. And, for the Popups:

<!-- Button that triggers the popup -->
<a class="main" id="my-button_1" href="#">Popup 1</a></b><br />
<!-- Element to pop up -->
<div id="element_to_pop_up_1">
// ...
</div>


<!-- Button that triggers the popup -->
<a class="main" id="my-button_1" href="#">Popup 1</a></b><br />
<!-- Element to pop up -->
<div id="element_to_pop_up_1">
// ...
</div>

He's probably right (sure of it), but not sure how to implement this, or whether this is even possible (small chance he's wrong).

Help? And thanks!

Answer 1

Since you are using jquery, you should use it's on() method to attach a single listener to the parent DOM element, and use the selector parameter to properly delegate the event to it's children (the button/popups).

If this sounds confusing, a simple example might help:

HTML:

<div id="parent">
    <a href="popup1" class="button">Show popup 1</a>
    <div id="popup1" class="popup">1</div>

    <a href="popup2" class="button">Show popup 2</a>
    <div id="popup2" class="popup">2</div>

    <a href="popup3" class="button">Show popup 3</a>
    <div id="popup3" class="popup">3</div>

    <a href="http://www.google.com/" target="_blank">Non-popup link</a>
</div>

JS:

$('#parent').on('click', 'a.button', function (event) {
    event.stopPropagation();
    event.preventDefault();

    var popup = $(this).attr('href');
    $('#'+popup).bPopup();
});

This adds a single event listener on the parent element, which only gets triggered if the child element which triggered the event matches the selector (in this case a.button). It determines which popup to show by retreiving the popup's id from the href attribute.

You can see this example working here.

Answer 2

The below function ( myFunction() ) takes the Id of anchor/div tag which is clicked and another id of div content to be display. And applies the same style for all popup models. And also it hides the old popup which already opened when u open new popup. All popup properties you can change.

Here i used only for two popups but you can use it for many as same did here.

<script type="text/javascript">


function myFunction(whId,whtDivContent,e) {
    //var totWidth = $(document).width();
    //var marTop = position.top;
    var elt = $(whId);
    var position = elt.position();
    var marLeft = position.left - 130;

    if(marLeft <= 1) {
        marLeft = 10;
    }

    var openModal_profile ='#openModal_profile';
    var openModal_menu ='#openModal_menu';

    // Prevents the default action to be triggered. 
    e.preventDefault();

    $(whtDivContent).bPopup({
        position: [marLeft, 0] //x, y
        ,opacity: 0.9
        ,closeClass : 'b-close'
        ,zIndex: 2
        ,positionStyle: 'fixed' //'fixed' or 'absolute' 'relative'
        ,follow: [false,false] //x, y
        ,onOpen: function() {
            if(openModal_profile == whtDivContent) {
                $(openModal_menu).bPopup().close();
            }
            else if(openModal_menu == whtDivContent) {
                $(openModal_profile).bPopup().close();
            }

            $(whId).css({'background-color':"#DFDFDF"}); 
        }
        ,onClose: function() { $('.close').click(); $(whId).css({'background-color':""}); }

    });
}



         ;(function($) {
                     // DOM Ready
                    $(function() {
                        // From jQuery v.1.7.0 use .on() instead of .bind()
                        //$(id_menu).on('click',function(e) {}

                        var id_menu = '#id_menu';
                        var openModal_menu ='#openModal_menu';
                        $(id_menu).toggle(function(e) {
                            //$(id_menu).css({'background-color':"#DFDFDF"});
                            myFunction(id_menu,openModal_menu,e);
                        },function(e){
                            //$(id_menu).css({'background-color':""});
                            $('.close').click();
                            $(openModal_menu).bPopup().close();

                        });

                        var id_profile = '#id_profile';
                        var openModal_profile ='#openModal_profile';
                        $(id_profile).toggle(function(e) {
                            //$(id_profile).css({'background-color':"#DFDFDF"});
                            myFunction(id_profile,openModal_profile,e);
                        },function(e){
                            //$(id_profile).css({'background-color':""});

                            $(openModal_profile).bPopup().close();
                        });

                    //ENDS HERE    
                    });
                })(jQuery);
            </script>