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>