未显示bPopup jQuery模式正文
未显示bPopup jQuery模式正文
提问于 2015-07-01 07:01:39
因此，我尝试使用bPopup作为模式窗口，但我看不到如何弹出实际的模式窗口。我按照文档中的说明操作(请参阅http://dinbror.dk/bpopup/)，但是我似乎不能让它出现。我是不是遗漏了什么？
<html>
<script type = "text/javascript" src = "jquery-1.11.3.min.js"></script>
<script type = "text/javascript" src = "jquery.bpopup.min.js"></script>
<p> Some text </p>
<div style="display:none" id='popup'>
Why is there no modal body???
</div>
<script type = "text/javascript">
$(document).ready(
function(){
$('p').click(function(){
$('#popup').bPopup();
})
})
</script>
</html>生成的脚本如下所示：
单击后，结果如下：
但是，在文档中，模式如下：
我真的不确定我错过了什么。我可能只是对一些显而易见的东西视而不见，有什么想法吗？
回答 2
Stack Overflow用户
发布于 2015-07-01 07:40:42
你读过这篇文章吗？
什么是bPopup？bPopup是一个轻量级的jQuery模式弹出插件(压缩后只有1.49KB )。它不创建或样式您的弹出式，但提供了所有的逻辑，如居中，模式覆盖，事件和更多。它为你提供了很多定制的机会，以满足你的需求。
因此，您需要为模式窗口编写自己的样式。
Stack Overflow用户
发布于 2015-07-01 08:05:49
不要给出内联样式style="display:none"。内联样式将具有最高优先级，因此bpopup不会/不能更改该属性。
在css中设置样式，如下所示
#popup {
background-color:#fff;
border-radius:15px;
color:#000;
display:none;
padding:20px;
min-width:400px;
min-height: 180px;
}
$(document).ready(function() {
$('p').click(function() {
$('#popup').bPopup();
});
});#popup {
background-color: #fff;
border-radius: 15px;
color: #000;
display: none;
padding: 20px;
min-width: 400px;
min-height: 180px;
}
.bClose {
cursor: pointer;
position: absolute;
right: 10px;
top: 5px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/dinbror/bpopup/master/jquery.bpopup.min.js"></script>
<p>Some text</p>
<div id='popup'>Why is there no modal body???
<span class="bClose">x</span>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/31149952
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号