防止启动模式显示在页面加载

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 class。这个工程，但然后模式不显示按钮单击。

2. 确保bootstrap 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> 
     </ 

但是，Bootstrap版本较旧。看到JSFiddle： https://jsfiddle.net/ruturaaj/6fz2505e/

我以为Designer已经使用了最新的Bootstrap;但是他在设计中使用了什么（以及他最熟悉的原因）。

因此，（至少在我的情况）的Modal Dialog showing up on Page Load问题似乎与引导的旧版本V2.X。当我用Bootstrap v3.x替换 Bootstrap v2时，一切都开始运作良好（当然有一些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>