Question

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

生成的脚本如下所示： Before Click 点击后，结果如下： After Click

但是，在文档中，模式如下： enter image description here

我真的不确定我错过了什么。我可能只是对一些非常明显的东西，任何想法视而不见？

Answer 1

你读过这个吗？

什么是bPopup？ bPopup是一个轻量级的jQuery模式弹出插件（只有1.49KB gzipped）。它不会创建或设置您的弹出窗口但是为您提供所有逻辑，如居中，模态叠加，事件和更多。它为您提供了很多自定义的机会满足你的需求。

所以你需要为模态窗口编写自己的样式。

Answer 2

不要提供内联样式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>

bPopup jQuery模式正文未显示

2 个答案: