1. ホーム
  2. ジャバスクリプト

[解決済み】ページロード時にBootstrapモーダルを起動する

2022-04-19 23:13:01

質問

JavaScriptが全くわかりません。Bootstrapのドキュメントには、次のように書かれています。

JavaScriptでモーダルを呼び出す。 $('#myModal').modal(options)

ページロード時にこれを呼び出す方法がわかりません。Bootstrapページで提供されたコードを使用すると、要素のクリック時にモーダルを正常に呼び出すことができますが、ページロード時にすぐにロードしたいのです。

解決方法は?

ページロード時に呼び出したいモーダルを、jQuery の load イベントが発生すると、このようにポップアップ表示されます。

JS

<script type="text/javascript">
    $(window).on('load', function() {
        $('#myModal').modal('show');
    });
</script>

HTML

<div class="modal hide fade" id="myModal">
    <div class="modal-header">
        <a class="close" data-dismiss="modal">×</a>
        <h3>Modal header</h3>
    </div>
    <div class="modal-body">
        <p>One fine body…</p>
    </div>
    <div class="modal-footer">
        <a href="#" class="btn">Close</a>
        <a href="#" class="btn btn-primary">Save changes</a>
    </div>
</div>

ページ内でモーダルを呼び出すには、次のようなリンクで呼び出します。

<a class="btn" data-toggle="modal" href="#myModal">Launch Modal</a>