0

我正在使用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为每个弹出窗口创建一个新 ID。

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

4

1 回答 1

0

我建议使用 jQuery UI 的对话框方法。http://jqueryui.com/dialog/ 有了这个，你可以隐藏所有你想在你的页面中弹出的元素，用cssdisplay: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-21T15:14:04.743 回答