Question

我是Bootstrap的新手，我遇到了一些让模态对话框正常工作的问题。尽管设置了show：false，但每次刷新页面时都会显示该对话框。

这是一个显示问题的小提琴：Fiddle

代码：

<a class="btn" data-toggle="modal" href="#modalwrapper" >Log On</a>


<div class="modal" id="modalwrapper">
    <div class="modal-header">
        <a class="close" data-dismiss="modal">×</a>
        <h2>Log On</h2>
    </div>

    <div class="modal-body span7">    
      Body
    </div>

    <div class="modal-footer">
        <a href="#" class="btn">Close</a>
        <a href="#" class="btn btn-primary">Save changes</a>
    </div>
</div>


$(function () {
    $('#modalwrapper').modal({
        backdrop: true,
        keyboard: true,
        show: false
    });
});

我已经确认正在执行.modal调用。

我做错了什么？添加display：none样式解决了问题，但这不是重点。

Answer 1

使用提供的hide引导类

隐藏模态

<div class="modal hide" id="modalwrapper">
  ..
</div>

（通过查看bootstrap.css）基本上是你想象的

.hide {
  display: none;
}

Answer 2

亚历山大回答说，将.hide课程添加到模型的div。事实上，这正是文档演示的设置方式。来自http://twitter.github.com/bootstrap/javascript.html#modals的来源：

      <!-- sample modal content -->
      <div id="myModal" class="modal hide fade">
        <div class="modal-header">
          <a class="close" data-dismiss="modal" >&times;</a>
          <h3>Modal Heading</h3>
        </div>
        <div class="modal-body">
          <h4>Text in a modal</h4>
          <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem.</p>

          <h4>Popover in a modal</h4>
          <p>This <a href="#" class="btn popover-test" title="A Title" data-content="And here's some amazing content. It's very engaging. right?">button</a> should trigger a popover on hover.</p>

          <h4>Tooltips in a modal</h4>
          <p><a href="#" class="tooltip-test" title="Tooltip">This link</a> and <a href="#" class="tooltip-test" title="Tooltip">that link</a> should have tooltips on hover.</p>

          <hr>

          <h4>Overflowing text to show optional scrollbar</h4>
          <p>We set a fixed <code>max-height</code> on the <code>.modal-body</code>. Watch it overflow with all this extra lorem ipsum text we've included.</p>
          <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
          <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
          <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
          <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
          <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
          <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
        </div>
        <div class="modal-footer">
          <a href="#" class="btn" data-dismiss="modal" >Close</a>
          <a href="#" class="btn btn-primary">Save changes</a>
        </div>
      </div>
      <a data-toggle="modal" href="#myModal" class="btn btn-primary btn-large">Launch demo modal</a>

很多时候你想要查看Bootstrap文档的来源以完全理解一个功能（例如，了解如何使用.form-actions的唯一方法是查看演示的来源;它没有明确记录）。

Boostrap的模态对话框总是在刷新时显示，即使show设置为false

2 个答案: