ブートストラップモードがページロードに表示されないようにする

Question

これは私がこのようなものに直面する初めてのことです...非常に奇妙です！

私は、ページの下部（bodyタグの直前）にモーダルダイアログコードを持っています。これは後でPHPでデータで埋められます。

<!-- email dialog --> 
<div id="ewEmailDialog" class="modal" role="dialog" aria-hidden="true"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <h4 class="modal-title"> 
       </h4> 
      </div> 
      <div class="modal-body"> 

      </div> 
      <div class="modal-footer"> 
       <button type="button" class="btn btn-primary ewButton"> 
        <?php echo $Language->Phrase("SendEmailBtn") ?> 
       </button> 
       <button type="button" class="btn btn-default ewButton" data-dismiss="modal"> 
        <?php echo $Language->Phrase("CancelBtn") ?> 
       </button> 
      </div> 
     </div> 
    </div> 
</div> 

jQueryとBootstrap JSが正しい順序でページのフッターにロードされました。ページがロードされるたびに、ブランクのモーダルダイアログが表示されます。 $(document).ready(function() {});にコードはありませんが、モーダルダイアログが表示されます。

ここで検索したところ、類似の質問がいくつか掲載されていました。そこに提案された解決策は私にとっては役に立たなかった。私は次のように試しました...

1. hideクラスを追加してください。これは動作しますが、モーダルはボタンクリックでも表示されません。

2. ブートストラップjsがロードされていることを確認してください。after jQuery。はい、それがスクリプトの読み込み方法です。

3. modal('show')をトリガーする関数があるかどうかを確認してください。私はチェックし、そのようなjQueryコールはありません。

4. 最新バージョンのjQueryとBootstrap ...はい。

なぜモーダルが表示され続けるのかまだわかりません。この問題を解決するために私を助けてください。

乾杯、

Ruturaaj。

Answer 1

私はエラーを再現できました。 HTMLコードの構造は以前と同じです...

<div class="main"> 
     <div class="main-inner"> 
      <div class="container"> 
       <div class="row"> 
        <div class="col-sm-12"> 
         <div class="alert alert-info"> 
          Page Content goes here. 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
     <!-- /main-inner --> 
    </div> 
    <!-- /main --> 

    <div class="footer"> 
     <div class="footer-inner"> 
      <div class="container"> 
       <div class="row"> 
        <div class="span12"> 
         &copy; 2017 
         <a href="#">Bootstrap Responsive Template</a> 
         . 
        </div> 
        <!-- /span12 --> 
       </div> 
       <!-- /row --> 
      </div> 
      <!-- /container --> 
     </div> 
     <!-- /footer-inner --> 
    </div> 
    <!-- /footer --> 

    <!-- modal dialog --> 
    <div id="ewModalDialog" class="modal" role="dialog" aria-hidden="true"> 
     <div class="modal-dialog"> 
      <div class="modal-content"> 
       <div class="modal-header"> 
        <h4 class="modal-title"> 
        </h4> 
       </div> 
       <div class="modal-body"> 
       </div> 
       <div class="modal-footer"> 
       </div> 
      </div> 
     </div> 
    </div> 
    <!--## if (bUseModalLookup) { ##--> 
    <!-- modal lookup dialog --> 
    <div id="ewModalLookupDialog" class="modal" role="dialog" aria-hidden="true"> 
     <div class="modal-dialog"> 
      <div class="modal-content"> 
       <div class="modal-header"> 
        <h4 class="modal-title"> 
        </h4> 
       </div> 
       <div class="modal-body"> 
       </div> 
       <div class="modal-footer"> 
       </div> 
      </div> 
     </div> 
    </div> 
    <!--## } ##--> 
    <!--## if (bUseAddOpt) { ##--> 
    <!-- add option dialog --> 
    <div id="ewAddOptDialog" class="modal" role="dialog" aria-hidden="true"> 
     <div class="modal-dialog"> 
      <div class="modal-content"> 
       <div class="modal-header"> 
        <h4 class="modal-title"> 
        </h4> 
       </div> 
       <div class="modal-body"> 
       </div> 
       <div class="modal-footer"> 
        <button type="button" class="btn btn-primary ewButton"> 
         <?php echo $Language-> 
         Phrase("AddBtn") ?> 
        </button> 
        <button type="button" class="btn btn-default ewButton" data-dismiss="modal"> 
         <?php echo $Language-> 
         Phrase("CancelBtn") ?> 
        </button> 
       </div> 
      </div> 
     </div> 
    </div> 
    <!--## } ##--> 
    <!--## if (bUseEmailExport) { ##--> 
    <!-- email dialog --> 
    <div id="ewEmailDialog" class="modal" role="dialog" aria-hidden="true"> 
     <div class="modal-dialog"> 
      <div class="modal-content"> 
       <div class="modal-header"> 
        <h4 class="modal-title"> 
        </h4> 
       </div> 
       <div class="modal-body"> 
       </div> 
       <div class="modal-footer"> 
        <button type="button" class="btn btn-primary ewButton"> 
         <?php echo $Language-> 
         Phrase("SendEmailBtn") ?> 
        </button> 
        <button type="button" class="btn btn-default ewButton" data-dismiss="modal"> 
         <?php echo $Language-> 
         Phrase("CancelBtn") ?> 
        </button> 
       </div> 
      </div> 
     </div> 
    </div> 
    <!--## } ##--> 
    <!-- message box --> 
    <div id="ewMsgBox" class="modal" role="dialog" aria-hidden="true"> 
     <div class="modal-dialog"> 
      <div class="modal-content"> 
       <div class="modal-body"> 
       </div> 
       <div class="modal-footer"> 
        <button type="button" class="btn btn-primary ewButton" data-dismiss="modal"> 
         <?php echo $Language-> 
         Phrase("MessageOK") ?> 
        </button> 
       </div> 
      </div> 
     </div> 
    </div> 
    <!-- prompt --> 
    <div id="ewPrompt" class="modal" role="dialog" aria-hidden="true"> 
     <div class="modal-dialog"> 
      <div class="modal-content"> 
       <div class="modal-body"> 
       </div> 
       <div class="modal-footer"> 
        <button type="button" class="btn btn-primary ewButton"> 
         <?php echo $Language-> 
         Phrase("MessageOK") ?> 
        </button> 
        <button type="button" class="btn btn-default ewButton" data-dismiss="modal"> 
         <?php echo $Language-> 
         Phrase("CancelBtn") ?> 
        </button> 
       </div> 
      </div> 
     </div> 
    </div> 
    <!-- session timer --> 
    <div id="ewTimer" class="modal" role="dialog" aria-hidden="true"> 
     <div class="modal-dialog"> 
      <div class="modal-content"> 
       <div class="modal-body"> 
       </div> 
       <div class="modal-footer"> 
        <button type="button" class="btn btn-primary ewButton" data-dismiss="modal"> 
         <?php echo $Language-> 
         Phrase("MessageOK") ?> 
        </button> 
       </div> 
      </div> 
     </ 

ただし、ブートストラップバージョンは古いものです。 JSFiddleを参照してください： https://jsfiddle.net/ruturaaj/6fz2505e/

私はDesignerが最新のBootstrapを使用していると考えていました。それは彼がデザイン（そして彼に最もよく知られている理由）で使っているものはversion 2.3です。

（少なくとも私の場合）Modal Dialog showing up on Page Loadの問題は、旧バージョンのバージョン2.xのブートストラップに関連しているようです。 Bootstrap v2をBootstrap v3.xに置き換えたとき、すべてがうまくいくようになりました（いくつかのCSSの競合があり、設計者がこれを扱うかもしれません）。

Answer 2

のdiv

<div id="ewEmailDialog" class="modal" role="dialog" aria-hidden="true" 
    style="display:none"> 
    <div class="modal-dialog"> 
    <div class="modal-content"> 
    <div class="modal-header"> 
    <h4 class="modal-title"> 
    </h4> 
    </div> 
    <div class="modal-body"> 

    </div> 
    <div class="modal-footer"> 
    <button type="button" class="btn btn-primary ewButton"> 
    <?php echo $Language->Phrase("SendEmailBtn") ?> 
    </button> 
    <button type="button" class="btn btn-default ewButton" data- 
    dismiss="modal"> 
    <?php echo $Language->Phrase("CancelBtn") ?> 
    </button> 
    </div> 
    </div> 
    </div> 
    </div>