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

Question

我需要在我的页面启动时显示我的模态窗口，并且我能够在本网站的其他地方找到该解决方案（将 class="modal fade" 更改为 class="模态展示”）。

但是，在这样做之后，褪色的背景就消失了。我尝试在与“modal”相同的 div 上使用“modal-backdrop”类，但不透明度设置为 0.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')
})

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