Question

我正在使用bPopup启动内联弹出窗口。 http://dinbror.dk/blog/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>

效率不高，因为我需要为每个按钮创建一个不同的事件，为每个按钮创建一个新ID，并为每个弹出窗口创建一个新的ID。

我正在阅读有关使用.on()而不是绑定的信息。但我不知道从那里去哪里。

Answer 1

我建议使用jQuery UI的对话框方法。 http://jqueryui.com/dialog/ 使用此功能，您可以使用css display:none;隐藏您想要在页面中的div中弹出的所有元素<div class="button"> <div class="popup">Content of popup</div> </div> <div class="button"> <div class="popup">Content of popup2</div> </div>为它们提供相同的类，然后您可以附加这样的单个侦听器。

HTML

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

的Javascript

{{1}}

多个jquery内联模态弹出窗口

1 个答案: