bpopup多个

Question

我使用的是一个轻量级的jQuery弹出插件，叫做'bPopup‘。我正在使用它在我的网站上的时刻加载多个弹出窗口时，点击。我最近被告知，我的代码效率很低，因为我使用多个JavaScript 'listeners‘加载多个弹出窗口，即：

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

​

^^多个JavaScript‘监听程序’。并且，对于弹出窗口：

<!-- 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>

他可能是对的(肯定)，但不确定如何实现这一点，或者这是否可能(他错的可能性很小)。

帮助?谢谢！

Answer 1

由于您使用的是jquery，因此应该使用它的选择器将单个侦听器附加到父DOM元素，并使用on() method参数将事件正确地委托给它的子元素(按钮/弹出窗口)。

如果这听起来令人困惑，一个简单的例子可能会有所帮助：

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

这将在父元素上添加一个事件侦听器，仅当触发事件的子元素与选择器(在本例中为a.button)匹配时才会触发。它通过从href属性中检索弹出窗口的id来确定要显示哪个弹出窗口。

You can see this example working here.

Answer 2

下面的函数( myFunction() )接受被点击的锚/ div标签的Id和要显示的div内容的另一个id。并对所有弹出模型应用相同的样式。它还隐藏了当你打开新的弹出窗口时已经打开的旧弹出窗口。您可以更改的所有弹出窗口属性。

这里我只用了两个弹出窗口，但是你可以用它来做很多弹出窗口，就像这里做的一样。

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