263

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

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

ページの読み込み時にこれを呼び出す方法がわかりません。Bootstrapページで提供されているコードを使用すると、要素のクリックでModalを正常に呼び出すことができますが、ページの読み込み時にすぐに読み込まれるようにします。

4

20 に答える 20

495

ページの読み込み時に呼び出すモーダルをloadドキュメントのヘッドセクションのjQueryイベント内にラップするだけで、次のようにポップアップ表示されます。

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…&lt;/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>
于 2012-04-19T18:52:06.690 に答える
91

javascriptモーダルを表示する必要はありません

最も簡単な方法は、「hide」を「in」に置き換えることです。

class="modal fade hide"

それで

class="modal fade in"

onclick = "$('.modal').hide()"アドオンボタンを閉じる必要があります。

PS：最良の方法はjQueryスクリプトを追加することだと思います：

$('.modal').modal('show');
于 2013-07-03T09:39:37.917 に答える
43

以下を追加するだけです-

class="modal show"

実例-

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<div class="container">
  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

  <!-- Modal -->
  <div class="modal show" id="myModal" role="dialog">
    <div class="modal-dialog">
    
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">
          <p>Some text in the modal.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
      
    </div>
  </div>
  
</div>

于 2014-07-19T07:32:33.710 に答える
26

この実行可能なコードを試すことができます-

$(window).load(function()
{
    $('#myModal').modal('show');
});
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<div class="container">
  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
    
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">
          <p>Some text in the modal.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
      
    </div>
  </div>
  
</div>

詳細はこちらをご覧ください。

あなたはあなたの完全な答えを持っていると思います。

于 2016-04-28T06:20:07.247 に答える
14

2021年の更新

ブートストラップ5

BootstrapがjQueryを必要としなくなったので、JavaScriptを使用してモーダルを簡単に表示できます。

var myModal = new bootstrap.Modal(document.getElementById('myModal'), {})
myModal.toggle()

デモ

ブートストラップ4

Bootstrap 4のモーダルマークアップがわずかに変更されました。ページの読み込み時にモーダルを開き、オプションでモーダルの表示を遅らせる方法は次のとおりです。

$(window).on('load',function(){
    var delayMs = 1500; // delay in milliseconds
    
    setTimeout(function(){
        $('#myModal').modal('show');
    }, delayMs);
});    

<div class="modal fade" id="myModal">
      <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">My Modal</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body">
                    ...
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary mx-auto" data-dismiss="modal">Close</button>
                </div>
            </div>
      </div>
</div>

デモ

于 2018-07-09T12:09:12.640 に答える
9

Andre's Ilichが言うことに関しては、jqueryと呼ばれる行の後にjsスクリプトを追加する必要があります。

<script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.1.js" type="text/javascript"></script>

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

私の場合、それが問題でした。

于 2014-07-22T13:50:06.830 に答える
7

Bootstrap 3およびjQuery（2.2および2.3）でテスト済み

$(window).on('load',function(){
  $('#myModal').modal('show');
});



<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">

      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title"><i class="fa fa-exclamation-circle"></i>&nbsp; //Your modal Title</h4>
        </div>
        <div class="modal-body">
          //Your modal Content
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
        </div>
      </div>

    </div>
</div>

https://jsfiddle.net/d7utnsbm/

于 2016-04-12T00:15:07.933 に答える
6

私の場合、モーダルを表示するためにjQueryを追加しても機能しませんでした。

$(document).ready(function() {
    $('#myModal').modal('show');
});

これは、モーダルに属性aria-hidden="true"があったためと思われます。

<div class="modal fade" aria-hidden="true" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">

上記のjQueryと同様に、その属性を削除する必要がありました。

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">

モーダルクラスをからに変更しようとしましたが、機能しなかったことに注意してmodal fadeくださいmodal fade in。また、クラスをからmodal fadeに変更するとmodal show、モーダルを閉じることができなくなります。

于 2015-02-11T22:12:26.693 に答える
5

ここに解決策があります[javascriptの初期化なしで！]

モーダルをjavascriptで初期化せずに例を見つけることができなかったので、ページの読み込み時にjavascriptを遅延$('#myModal').modal('show')させずにモーダルを実装する方法についての提案を以下に示します。

  1. クラスとスタイルを使用してモーダルコンテナdivを編集します。

<div class="modal in" id="MyModal" tabindex="-1" role="dialog" style="display: block; padding-right: 17px;">

  1. クラスとスタイルであなたの体を編集します：

    <body class="modal-open" style="padding-right:17px;">

  2. モーダル背景divを追加します

    <div class="modal-backdrop in"></div>

  3. スクリプトを追加

    $(document).ready(function() {
    $('body').css('padding-right', '0px');
    $('body').removeClass('modal-open');
    $('.modal-backdrop').remove();

    $('#MyModal').modal('show'); });

    何が起こるかというと、モーダルのhtmlは、JavaScriptなしで（遅延なしで）ページの読み込み時に読み込まれます。この時点ではモーダルを閉じることができないため、すべてがロードされたときにモーダルを適切にロードするためのdocument.readyスクリプトがあります。実際にカスタムコードを削除してから、.modal（'show'）を使用してモーダルを（再び）初期化します。

于 2016-10-23T12:32:04.750 に答える
5

データ属性を使用するだけで、JavaScriptを記述せずにモーダルをアクティブ化できます。

trueに設定されたオプション「show」は、初期化されたときにモーダルを表示します。

<div class="modal fade" tabindex="-1" role="dialog" data-show="true"></div>
于 2017-09-21T18:48:16.220 に答える
5

他の人が述べたように、display：blockを使用してモーダルを作成します

<div class="modal in" tabindex="-1" role="dialog" style="display:block">
...

背景をページの任意の場所に配置します。必ずしもページの下部に配置する必要はありません。

<div class="modal-backdrop fade show"></div>

次に、ダイアログを再び閉じることができるようにするには、これを追加します

<script>
    $("button[data-dismiss=modal]").click(function () {
        $(".modal.in").removeClass("in").addClass("fade").hide();
        $(".modal-backdrop").remove();
    });
</script>

お役に立てれば

于 2018-03-27T12:27:44.903 に答える
4

user2545728とReftの回答に加えて、javascriptは使用していませんが、modal-backdrop in

追加する3つのこと

  1. modal-backdrop in.modalクラスの前のクラスを持つdiv
  2. style="display:block;".modalクラスに
  3. fade in.modalクラスと一緒に

例

<div class="modal-backdrop in"></div>

<div class="modal fade in" tabindex="-1" role="dialog" aria-labelledby="channelModal" style="display:block;">

    <div class="modal-dialog modal-lg" role="document">

        <div class="modal-content">

            <div class="modal-header">

                <h4 class="modal-title" id="channelModal">Welcome!</h4>

            </div>

            <div class="modal-body" style="height:350px;">

                How did you find us?

            </div>

        </div>

    </div>

</div>
于 2016-11-14T11:32:12.490 に答える
3 
<div id="ModalStart" class="modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-body">
          <p><i class="icon-spinner icon-spin icon-4x"></i></p>
    </div>
</div>

Javascriptがなくても起動時に表示できます。クラス「hide」を削除するだけです。

class="Modal"
于 2013-03-05T17:12:57.823 に答える
2

ブートストラップ3では、jsを使用してモーダルを初期化する必要があります。ページの読み込み時にモーダルマークアップがページにある場合は、モーダルが表示されます。

これを防ぎたい場合はshow: false、モーダルを初期化するオプションを使用してください。このようなもの： $('.modal').modal({ show: false })

于 2014-09-12T14:22:37.780 に答える
2

アップデート2020-ブートストラップ5

以前の回答からの優れた応答に基づいて、jQueryを使用しないBootstrap 5では、これは機能しました。

document.querySelector('[data-target="#exampleModal"]').click();

完全なスニペット：

window.onload = () => {
  document.querySelector('[data-target="#exampleModal"]').click();
}
<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css" rel="stylesheet" />


<div class="container py-3">

  <!-- Button trigger modal -->
  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
    Launch demo modal
  </button>

  <!-- Modal -->
  <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          ...
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary">Save changes</button>
        </div>
      </div>
    </div>
  </div>

</div>

于 2020-08-21T22:36:18.383 に答える
0

jquery.jsページの読み込みを高速化するために、延期したままにすることをお勧めします。ただし、jquery.js延期された$(window).load場合は機能しない可能性があります。その後、あなたは試すことができます

setTimeout(function(){$('#myModal').modal('show');},3000);

ページが完全に読み込まれた後、モーダルがポップアップ表示されます（jqueryを含む）

于 2015-03-25T15:52:29.340 に答える
0

ブートストラップが却下されて機能が失われるのを防ぐには、通常の起動ボタンを作成し、IDを指定して、jqueryを使用して「クリック」します。起動ボタン：

<button type="button" id="btnAnouncement" class="btn btn-primary" data-toggle="modal" data-target="#modalAnouncement">
  See what´s new!
</button>

jQueryトリガー：

$(document).ready(function () {
  $('#btnAnouncement').click();
)}

それが役に立てば幸い。乾杯！

于 2019-10-14T17:30:38.403 に答える
0

最近、Djangoメッセージを使用して、ボタンクリック（ページの読み込みなど）ではなく、jQueryを使用せずにBootstrap5モーダルを起動する必要がありました。これは私がそれをした方法です：

テンプレート/HTML

<div class="modal" id="notification">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Notification!</h5>
        <button type="button" class="btn-close"
                data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        {% for m in messages %}
          {{ m }}
        {% endfor %}
      </div>
      <div class="modal-footer justify-content-between">
        <a class="float-none btn btn-secondary" href="{% url 'some_view' %}"
           type="button">
          Link/Button A
        </a>
        <button type="button" class="btn btn-primary"
                data-bs-dismiss="modal">
          Link/Button B
        </button>
      </div>
    </div>
  </div>
</div>

ファイルまたはテンプレート内のJS

{% block javascript %}
  {{ block.super }}
  <script>
    var test_modal = new bootstrap.Modal(
      document.getElementById('notification')
    )
    test_modal.show()
  </script>
{% endblock javascript %}

このメソッドは、Djangoテンプレートがなくても機能します。HTMLを使用してscript、ブートストラップJSの後で要素の終わりの前にロードされるファイルまたは要素にJSを配置するだけbodyです。

于 2021-01-04T21:17:02.243 に答える
0

遅いかもしれませんが、この注文の問題を解決できず、モーダルが表示されませんでした。jquery click（）;を使用しました。

私はこれを試しました、そしてそれはうまくいきました:)

モーダルショーを呼び出すボタンを作成します>そのボタンを表示としてスタイル設定します：なし; 例 ：

 


$( "#clickme" ).click();
<html>
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<input type="button" value="0"  id="clickme" style="display:none;" data-toggle="modal" data-target="#exampleModal" />   
<!-- Modal -->
<div id="exampleModal" class="modal" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Clicked Successfully</h4>
      </div>
      <div class="modal-body">
        <p>Some text in the modal.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>

</body></html>

于 2021-05-31T09:45:05.583 に答える
0

jQueryを使用してこれを処理できます

テンプレートに最初にインポートする

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

jQueryスクリプトを使用してモーダルのIDをヒットします

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

これがケース表示のdjangoメッセージのモーダルです

{% if messages %}
      {% for message in messages %}
      <div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="false">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="staticBackdropLabel">Message</h5>
              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
              {{ message }}
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            </div>
          </div>
        </div>
      </div>
      {% endfor %}
        
    {% endif %}
于 2022-01-06T05:02:23.213 に答える