多個jQuery內聯模態彈出窗口

我使用bPopup來啓動內聯彈出窗口。 http://dinbror.dk/blog/bPopup/多個jQuery內聯模態彈出窗口

我有一個頁面，我需要能夠啓動許多不同的內聯彈出窗口取決於哪個鏈接被點擊。但我認爲bPopup的默認代碼效率很低，而且我找不到另一個允許在同一頁面上顯示多種不同內聯彈出窗口的插件。

下面是代碼：

的JavaScript：

// Semicolon (;) to ensure closing of earlier scripting 
    // Encapsulation 
    // $ is assigned to jQuery 
    ;(function($) { 

     // DOM Ready 
     $(function() { 

      // Binding a click event 
      // From jQuery v.1.7.0 use .on() instead of .bind() 
      $('#my-button').bind('click', function(e) { 

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

       // Triggering bPopup when click event is fired 
       $('#element_to_pop_up').bPopup(); 

      }); 

         // Binding a click event 
      // From jQuery v.1.7.0 use .on() instead of .bind() 
      $('#my-button2').bind('click', function(e) { 

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

       // Triggering bPopup when click event is fired 
       $('#element_to_pop_up2').bPopup(); 

      }); 

})(jQuery);

HTML：

<div id="my-button"> 
     <div id="element_to_pop_up">Content of popup</div> 
</div> 

<div id="my-button2"> 
    <div id="element_to_pop_up2">Content of popup2</div>   
</div>

它是沒有效率的，因爲我需要爲每個按鈕創建一個不同的事件，每個按鈕的新ID，以及每個彈出的新的ID。

我正在閱讀有關使用.on()而不是綁定。但我不確定該從哪裏出發。

來源

2013-08-21 Sackling

我會推薦使用jQuery UI的對話框方法。 http://jqueryui.com/dialog/ 有了這個，你可以隱藏所有的元素，你想彈出在你的頁面的div div與css display:none;給他們所有相同的類，然後你可以附加這樣一個單一的監聽器。

HTML

<div class="button"> 
     <div class="popup">Content of popup</div> 
</div> 

<div class="button"> 
    <div class="popup">Content of popup2</div>   
</div>

的Javascript

$('button').on('click', function(event){ 
    // Select the div with class popup, within the clicked element. 
    $('.popup', $(event.target)).dialog("open"); 
    // Potentially you might need to unhide the div through css like this 
    // $('.popup', $(event.target)).css('display', 'block'); 
}

來源

2013-08-21 15:14:04

多個jQuery內聯模態彈出窗口

回答

相關問題