bpopup不工作+页面加载时显示

Question

我对jquery和所有关于它的东西都是新手。我只做了一页即席，所以我迷路了。我需要显示iframe为和弹出。该怎么做呢？

我试过弹出窗口：

index.html类似于：

<button id="my-button">POP IT UP</button>
<!-- Element to pop up -->
<div id="element_to_pop_up">
    <a class="b-close">x<a/>
    Content of popup
</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/jquery.bpopup.min.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script src="js/scripting.min.js"></script>

并根据弹出窗口的首页修改了jquery.bpopup.min.js

// Semicolon (;) to ensure closing of earlier scripting
// Encapsulation
// $ is assigned to jQuery
;(function($) {

     // DOM Ready
    $(function() {

        // Binding a click event
        // From jQuery v.1.7.0 use .on() instead of .bind()
        $('#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({
        content:'iframe', //'ajax', 'iframe' or 'image'
        contentContainer:'.content',
        loadUrl:'http://dinbror.dk/search' //Uses jQuery.load()
    });


        });

    });

})(jQuery);

我使用了默认的CSS设置，比如：

#element_to_pop_up { 
    background-color:#fff;
    border-radius:15px;
    color:#000;
    display:none; 
    padding:20px;
    min-width:400px;
    min-height: 180px;
}
.b-close{
    cursor:pointer;
    position:absolute;
    right:10px;
    top:5px;
}

现在奇怪的是。有一个默认的js设置，比如$('#element_to_pop_up').bPopup();，它可以在点击按钮后显示简单的弹出窗口。但是当我使用Iframe设置(如上所述)时，什么也没有发生。没什么。为什么？我对此感到很困惑。

目标是在页面加载时显示弹出窗口。我已经看到了几个提示，但都不起作用。修改哪个文件以及如何修改？

如果你知道怎么帮我，请告诉我。别忘了我就像一个小孩子在学走路。所以不要跳过任何细节，比如“系鞋带”。非常感谢。

Answer 1

好的。我知道这个问题的答案。问题是因为你从他们的网站上复制并粘贴了你的代码，上面有一些错误。

仔细查看下面这行中的元素标识符：

$('element_to_pop_up').bPopup({.....

他们没有把#放在element_to_pop_up之前。它应该是

$('#element_to_pop_up').bPopup({.....

之后，您的代码应该可以工作了

Answer 2

<div id="element_to_pop_up">
<a class="b-close">x<a/>

<div class="content">
    Content of popup
</div>

</div>

只需添加一个包含类"content“的额外div即可。应该能行得通。

Answer 3

尝试将"jquery-1.10.2.js“库添加到您的页面或其最新版本。