bpopup multiple

Question

我正在使用一个名为'bPopup'的轻量级jQuery弹出式插件。目前我在我的网站上使用它来点击时加载多个弹出窗口。我最近告诉我的代码是低效的，因为我是加载多个弹出窗口与多个JavaScript“听众”，即：

<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，因此您应该使用它的on() method将单个侦听器附加到父DOM元素，并使用selector参数将事件正确委派给它的子元素（按钮/弹出窗口）。

如果这听起来有点混乱，一个简单的例子可以帮助：

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的（））开的Id锚的/被点击div标签和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>