Javascript Twitter Bootstrap 3.0/JQuery 1.9.1模式渲染错误

我已经阅读了一大堆关于这方面的文章，尝试了很多方法，但还是不知道出了什么问题。基本上，我已经在我的页面中添加了一个非常简单的模式，当我调用“show”时，它会淡出背景，并显示一个非常混乱的模式版本，只有当我删除“hide”时

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

以下是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>

&时代；
添加分配
使用我添加作业！

看起来您正在将版本2标记与版本3 CSS和JavaScript一起使用

有关正确的v3标记，请参阅

<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 -->

&时代；
添加分配
使用我添加作业

接近
保存更改

这里更新了演示-

升级主要版本时，应始终注意阅读任何注释，尤其是。从

模态标记已发生显著变化。

.modal header

、

modal body

和

modal footer

部分现在被包装在

modal content

和

中，以改进移动样式和行为

有趣的是，我今天从他们的网站上抓取了这个样本，但我想不知怎么的，我找到了v2 html-我会稍后再查看，谢谢@ShaneKenyon许多旧链接（如twitter.github.com/bootstrap）重定向到。只需关注URL:）