我非常喜欢jquery和所有这些。我只做一页专案,所以我迷路了。我需要显示iframe和弹出窗口。怎么做?
我试过bpopup:
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>
根据bpopup的主页我修改了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设置时(如上所述),什么也没发生。没有。
Whyyyy?我很困惑。
目标是在页面加载时显示弹出窗口。我看过几个提示,但没有一个有效。要修改哪个文件以及如何????
如果您知道如何提供帮助,请告诉我。只是不要忘记我就像一个小孩子学走路。所以不要跳过像“系鞋带”这样的细节。非常感谢。
答案 0 :(得分:5)
确定。我知道这个问题的答案。问题是因为您从他们的网站复制并粘贴了您的代码,但是它有问题。
仔细查看此行上的元素标识符:
$('element_to_pop_up').bPopup({.....
他们没有在element_to_pop_up之前输入#。它应该是
$('#element_to_pop_up').bPopup({.....
之后您的代码应该正常工作
答案 1 :(得分:0)
<div id="element_to_pop_up">
<a class="b-close">x<a/>
<div class="content">
Content of popup
</div>
</div>
只需添加一个额外的div与类&#34;内容&#34;。它应该工作。
答案 2 :(得分:0)
尝试将“jquery-1.10.2.js”库添加到您的页面或其最新版本。
答案 3 :(得分:-1)
有几件事需要检查。首先,打开Chrome开发工具并观看控制台。点击按钮,看看是否收到任何错误。
其次,查看“网络”标签,确保所有内容都正确加载。
您可以发布实际有效的代码,以便我们可以看到有什么不同吗?