Question

我正在使用http://dinbror.dk/bpopup/的jquery脚本在模式框中打开一个html文件。

HTML：

   <button id="my-button">Pop it Up</button>

    <div id="element_to_pop_up">

    <!-- Ajax Javascript that supposed to popup in modal-->
  <script>
    $(document).ready(function() {
    $('#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({
                contentContainer:'.content',
                loadUrl: 'test.html' //Uses jQuery.load()
            });
        });
    });
    </script>
    </div>

但是我想扩展这个脚本以便我可以在一个页面中打开多个ajax模式，有没有办法将这个脚本绑定在一起，而不是一遍又一遍地重复这个代码来打开每个ajax文件？

非常感谢您的帮助

Answer 1

你的问题不是那么具体。

每个人是否会从其他网址加载？

这可能是您正在寻找的答案，也可能不是：

$(document).ready(function() {
$('.my-button').bind('click', function(e) {//select all the buttons with a class selector

        var loadFile = $(this).data("file");

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

        // Triggering bPopup when click event is fired
        $('#element_to_pop_up').bPopup({
            contentContainer:'.content',
            loadUrl: loadFile //Uses jQuery.load()
        });
    });
});

//你的html：

<button data-file="test1.html" class="my-button">Load one modal</button>
<button data-file="test2.html" class="my-button">Load another modal</button>
<button data-file="test3.html" class="my-button">Load a third modal</button>

我假设您的插件bpopup可以多次使用。我没有测试过它。

BTW我不知道为什么你的脚本块出现在id为'element_to_pop_up'的div中。它不需要是一个它使代码更难阅读。

在模态框中加载多个Ajax html

1 个答案: