多个jquery内联模式弹出窗口

我正在使用

bPopup

启动一个内联弹出窗口

我有一个页面，我需要能够启动许多不同的内联弹出窗口取决于点击的链接。但是我认为

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>

弹出窗口的内容
popup2的内容

这是没有效率的，因为我需要为每个按钮创建不同的事件，为每个按钮创建一个新ID，为每个弹出窗口创建一个新的

ID

---

我在读关于使用

.on（）

而不是bind的文章。但我不确定从那里走到哪里

我建议使用jqueryui的dialog方法。 有了它，你可以用css

display:none隐藏你想在页面的div中弹出的所有元素为它们提供相同的类，然后可以像这样附加一个侦听器

HTML

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

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

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