Bootstrap模态背景仅显示“ class = fade”，而不显示class =“ show”

Question

我需要在启动页面时显示模态窗口，并且能够在此站点的其他位置找到该解决方案（将class =“ modal fade”更改为class =“ modal show” ）。

但是，这样做后，褪色的背景消失了。 我尝试在与“模态”相同的div上使用“模态背景”类，但是将不透明度设置为.5，这会使背景和模态窗口都透明，这当然是不希望的。 我对Javascript的了解不多，所以问题可能就在那里。

这是我的代码：

HTML：

   <div class="modal show"  tabindex="-1" role="dialog" data-keyboard="false" data-backdrop="static">
        <div class="modal-dialog" role="document">
            <div class="modal-content">

                <div class="modal-body">
                    <div>
                        <p style="font-size:17px;font-family: 'AntennaLight',  Arial, sans-serif;">Welcome to the <span style="font-family:'AntennaMedium',  Arial, sans-serif;">Lorem Ipsum</span> website.<br /> <br />
                        Please provide the ZIP code where you intend to register the vehicle and the intended date* you plan to purchase the vehicle.<br /> <br />
                        Thank you!<br /> <br />
                        </p>
                    </div>


                        <form id="msform" action='/Home/Submit' method="post">

                            <!-- fieldsets -->
                            <fieldset class="firstSet">

                                <p>
                                    <input type="text" name="zip" value="" placeholder="ZIP Code" />
                                </p>
                                <p>
                                    <input type="text" name="date" value="" placeholder="XX/XX/XXXX" />
                                </p>

                                <input name="submit" type="submit" class="submit action-button" value="Submit" />
                            </fieldset>
                        </form>

                  <div style="margin-top:30px;">

                    <p style="font-size:11px;font-family: 'AntennaLight',  Arial, sans-serif;">*If the sale date has already occurred, please use that date.</p>
                    </div>

                </div>
            </div>
        </div>
    </div>  

JS：

  <script>
   $( document ).ready(function() {
    $('.modal')
    .prop('class', 'modal') // revert to default
    .addClass( $(this).data('direction') );
  };
 </script>

在我工作过的其他网站上，当有一个按钮可以触发模式窗口时，使用class =“ modal fade”效果很好...但是在这种情况下，我需要在页面启动时显示窗口和背景，并简单地进行更改它改为class =“ modal show”，仅显示启动时的窗口，但不显示背景。

谢谢！

Answer 1

您可以给模型一个ID，然后像这样启动它的模态：

$( document ).ready(function() {
    $('#my-modal').modal('show')
})

这将保留您使用按钮手动触发它时发生的行为。

Answer 2

在关闭div模态以获取背景外观后，您需要在课堂上添加带有modal-background淡入淡出的div标记。

还要确保在关闭模态时使用jquery将其删除。

Example:

<!-- Modal -->
<div id="myModal" class="modal show" role="dialog">
</div> <!-- end of modal -->

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

Codepen链接：

http://codepen.io/saa93/pen/amNpyg