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

インライン スタイルを指定しないでください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 に答える
1

これを読んだことがありますか？

bポップアップとは何ですか? bPopup は、軽量の jQuery モーダル ポップアップ プラグインです (1.49KB のみ gzip 圧縮)。ポップアップの作成やスタイル設定は行いませんが、センタリング、モーダル オーバーレイ、イベントなどのすべてのロジックを提供します。カスタマイズする機会がたくさんあるので、ニーズに合わせてカスタマイズできます。


そのため、モーダル ウィンドウ用に独自のスタイルを記述する必要があります。

于 2015-06-30T23:40:42.187 に答える