防止Bootstrap Modal显示在页面加载上

Question

这是我第一次面对这样的事情......非常奇怪！

我在页面底部（正文标记之前）有模态对话框代码，后面用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>
        </

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

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

  

所以，（至少在我的情况下）Modal Dialog showing up on Page Load的问题似乎与Bootstrap的旧版本v2.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>

Answer 3

通过调用ID来调用页面加载模式。

-- table
SELECT * FROM products;
+------+---------+
| Name | Product |
+------+---------+
| Bob  | Car     |
| Bob  | Apples  |
| Bob  | Pears   |
| Bob  | Car     |
| John | Apples  |
| John | Pears   |
+------+---------+

-- query for people that do not have Car
+------+---------+
| Name | Product |
+------+---------+
| John | Apples  |
| John | Pears   |
+------+---------+


-- query for people having 'Car'
+------+---------+
| Name | Product |
+------+---------+
| Bob  | Car     |
| Bob  | Apples  |
| Bob  | Pears   |
| Bob  | Car     |
+------+---------+