web-dev-qa-db-ja.com

Bootstrapページ読み込み時のモーダルオープニング

bootstrap= modalのあるページを取得しました（手動： http://getbootstrap.com/javascript/#modals ）。

ページの読み込み時にこのモーダルを開きたいです。しかし、これは起きていません。

<!-- Modal -->
<div class="modal fade" id="memberModal" tabindex="-1" role="dialog" aria-labelledby="memberModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="memberModalLabel">Thank you for signing in!</h4>
      </div>
      <div class="modal-body">
        <p>However the account provided is not known.<BR>
        If you just got invited to the group, please wait for a day to have the database synchronized.</p>

        <p>You will now be shown the Demo site.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

<script type="text/javascript">
<!--
$('#memberModal').modal('show');
//-->
</script>

コードにボタンを追加した場合。ボタンを押すと、モーダルが開きます。

<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#memberModal">
  Launch modal
</button>

私はいくつかのことを試しましたが、ページの読み込み時にモーダルが自動的に開くということはできません。 bootstrap=のjsとcssの両方をhtmlヘッドで呼び出しています。

<!-- Bootstrap - Latest compiled and minified CSS -->
<link rel="stylesheet" type='text/css' href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

<!-- Bootstrap - Latest compiled and minified JavaScript -->
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

私は何を間違えていますか？

twitter-bootstrapmodal-dialogbootstrap-modal
9
Paul

問題が見つかりました。このコードは、php include（）関数で追加された別のファイルに配置されました。そして、このインクルードはBootstrapファイルがロードされる前に発生していました。したがって、Bootstrap JSファイルはまだロードされず、このモーダルは何もしません。

上記のコードサンプルでは何も問題はなく、htmlページの本文部分に配置されたときに意図したとおりに機能します。

<script type="text/javascript">
$('#memberModal').modal('show');
</script>
8
Paul

呼び出しの周りでdocument.ready()イベントを使用します。

$(document).ready(function () {

    $('#memberModal').modal('show');

});

jsFiddleの更新- http://jsfiddle.net/uvnggL8w/1/

25
haxtbh