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

尝试使用#字符查找元素，因为您尝试按ID查找。

<script>
    $(document).ready(function() { 
        $('#element_to_pop_up').bPopup({
            contentContainer:'.content',
            loadUrl: 'test.html' //Uses jQuery.load()
        });
    });
</script>

Answer 2

你很亲密。您缺少的是您需要将onclick事件绑定到按钮并将其放在$（文档）中。就像这样：

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

Answer 3

这是您想要的测试页面：

<html>
    <head> 
        <style>
         #element_to_pop_up { display:none; }
        </style>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/x.x.x/jquery.min.js"></script>
<script src="http://dinbror.dk/bpopup/assets/jquery.bpopup-0.9.4.min.js"></script>
<script>
;(function($) {
    $(function() {
        $('#my-button').bind('click', function(e) {
            e.preventDefault();
            $('element_to_pop_up').bPopup({
                contentContainer:'.content',
                loadUrl: 'test.html' //Uses jQuery.load()
                });
        });
     });
 })(jQuery);
</script>

    </head>
    <body>

        <!-- Button that triggers the popup -->
        <button id="my-button">POP IT UP</button>
        <!-- Element to pop up -->
        <div id="element_to_pop_up">Content of popup</div>

    </body>
</html>

使用模态ajax + jquery加载页面

3 个答案: