2

我已经浏览了很多关于此的文章并尝试了很多东西，但无法弄清楚出了什么问题。基本上，我在我的页面中添加了一个非常简单的模式，当我调用“显示”时，它会淡化背景并显示一个看起来非常混乱的模式版本，只有当我删除“隐藏”时。

请在回答之前查看 JSFiddle 代码，您发布的任何链接我都可以保证我已经访问过。谢谢！

http://jsfiddle.net/tY3Nj/

这是HTML：

<div id="assignModal" class="fade modal" role="dialog" tabindex="-1">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4>Add Assignment</h4>
        </div>
        <div class="modal-body">
            Use me to add an assignment!
        </div>
        <div class="modal-footer">
            <a href="#" class="btn">Close</a>
            <a href="#" class="btn btn-primary">Save changes</a>
        </div>
    </div>
4

1 回答 1

3

看起来您正在使用带有版本 3 CSS 和 JavaScript 的版本 2 标记。

有关正确的 v3 标记，请参阅http://getbootstrap.com/javascript/#modals。

<div class="modal fade" id="assignModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title">Add Assignment</h4>
      </div>
      <div class="modal-body">
        <p>Use me to add an assignment!</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

在这里更新了演示 - http://jsfiddle.net/tY3Nj/1/

升级主要版本时，您应该始终注意阅读任何注释，尤其是迁移指南。从2.x 迁移到 3.0 - 附加说明...

模态标记发生了显着变化。、和部分现在被包裹起来，.modal-header用于改进移动样式和行为。.modal-body.modal-footer.modal-content.modal-dialog

于 2013-10-03T23:44:17.823 回答