Question

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

然而，在这样做时，褪色的背景已经消失。我尝试在与“模态”相同的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标签以获得背景外观之后，您需要在课堂中添加带有模态背景渐变的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

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

2 个答案: