javascript - 使用模态ajax + jquery加载页面

Question

我一生都无法弄清楚如何在模式弹出框中加载外部页面。我正在使用 http://dinbror.dk/bpopup/ 中的模式弹出框

由于我是 javascript 新手，所以我无法弄清楚文档。我可以加载一个常规的弹出框，这对我来说很容易，但是当涉及到在模态中加载ajax时，我不知道在html文档中的哪里声明它:

$('element_to_pop_up').bPopup({
            contentContainer:'.content',
            loadUrl: 'test.html' //Uses jQuery.load()
        });

该脚本应该在弹出窗口中加载 test.html，但事实并非如此。它会加载一个空白的弹出框。

这是我尝试做的事情:

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

<!-- Ajax Javascript that supposed to popup in modal-->
<script>$('element_to_pop_up').bPopup({
            contentContainer:'.content',
            loadUrl: 'test.html' //Uses jQuery.load()
        });</script>

</div>

你知道我搞砸了什么吗？

Answer 1

你很接近。您缺少的是您需要将 onclick 事件绑定(bind)到您的按钮并将其放入 $(document).ready 中，如下所示:

<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>