3

ブートストラップ モーダルを永続的に表示するログイン ページのビューを codeignitor で作成しようとしています。ボタンを追加することでモーダル ポップアップ ウィンドウを取得できますが、ページの読み込み時にデフォルトでモーダルを表示する方法がわかりません。

ドキュメントから以下をコピーして貼り付けましたが、ページには何も表示されず、ソースにのみ表示されます。

<div class="modal fade">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>       

    <h4 class="modal-title">Modal title</h4>
     </div>
     <div class="modal-body">
      <p>One fine body&hellip;</p>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    <button type="button" class="btn btn-primary">Save changes</button>
  </div>
  </div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->

4

3 に答える 3

14

ドキュメントの準備ができたら、JavaScriptでモーダルを開きます$('#myModal').modal('show');

背景とキーボードを false に設定して、その外側をクリックしたときにモーダルが閉じないようにします。

$(function() {
$('#myModal').modal({backdrop:false,keyboard:false});
$('#myModal').modal('show');
});


$('#myModal').modal({backdrop:'static',keyboard:false, show:true});

または、ドキュメントから背景を静的に設定します：「または、クリック時にモーダルを閉じない背景に静的を指定します。

于 2013-10-08T17:54:42.157 に答える
14

クラスを削除してモーダルfadeに追加することで、これを作成できます。show

<div class="modal show">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">Modal title</h4>
            </div>

            <div class="modal-body">
                <p>One fine body&hellip;</p>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

デモを確認する

于 2013-10-08T10:32:48.390 に答える
2

モーダルを非表示にするには、javascript を使用せずに背景を静的に設定します。

 <div class="modal" data-backdrop="static" ... >

次を使用してオンロードを開きます。

$('#your_modal').modal('show');
于 2019-07-07T22:58:53.490 に答える