使用模态ajax + jquery加载页面答案

【问题标题】：Load page using modal ajax + jquery使用模态ajax + jquery加载页面
【发布时间】：2014-02-27 23:35:32
【问题描述】：

我终其一生都无法弄清楚如何在模态弹出框中加载外部页面。我正在使用来自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>

知道我在搞砸什么吗？

【问题讨论】：

可能重复？ stackoverflow.com/questions/3837166/…
如果该问题使用相同的 jQuery 插件，我认为这将是重复的。

标签： javascript jquery html ajax

【解决方案1】：

你很接近。您缺少的是您需要将 onclick 事件绑定到您的按钮并将其放入 $(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>

【讨论】：

很棒，效果很好。现在我对它的工作原理有了更好的了解。
很高兴我能帮上忙。如果有效，请将其标记为已回答。 ^_^
我想知道是否有办法扩展这个脚本。即。我希望这适用于多个弹出窗口，而无需为每个 #my-button1、#my-button2 和 #element_to_pop_up1、#element_to_pop_up2 复制 javascript。换句话说，有一种方法可以在不复制 javascript 代码的情况下绑定所有 ajax 事件，我认为如果这样做会导致页面超载。

【解决方案2】：

尝试使用 # 字符查找元素，因为您尝试通过 id 查找。

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

【讨论】：

【解决方案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>

【讨论】：