0

所以我试图将 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>

生成的脚本如下所示： 点击前 点击后，结果是这样的： 点击后

但是，在文档中，模态如下： 在此处输入图像描述

我真的不确定我错过了什么。我可能只是对一些非常明显的事情视而不见，有什么想法吗？

4

2 回答 2

1

你读过这个吗？

什么是弹出窗口？bPopup 是一个轻量级的 jQuery 模态弹出插件（压缩后只有 1.49KB）。它不会创建或设置您的弹出窗口，而是为您提供所有逻辑，如居中、模态叠加、事件等。它为您提供了很多定制的机会，因此它可以满足您的需求。


因此，您需要为模态窗口编写自己的样式。

于 2015-06-30T23:40:42.187 回答
1

不要给出内联样式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>

于 2015-07-01T00:05:48.590 回答