0

我正在使用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 文件？

非常感谢您的帮助

4

1 回答 1

1

你的问题不是那么具体。

每个人都会从不同的 URL 加载吗？

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

$(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 可以多次使用。我没有测试过。

顺便说一句，我不知道为什么您的脚本块出现在 id 为“element_to_pop_up”的 div 中。它不需要是它使代码更难阅读。

于 2014-02-28T16:21:32.323 回答