无法让Twitter Bootstrap模式工作

Question

我似乎无法让我的模态工作。我得到了透明的叠加图，但就是这样。内容存在于<div>中，但不会在屏幕上以模式格式显示。这是我的代码。有没有人有任何想法？

这是我的HTML：

<a href="#modal-[nid]" class="ajax-link" data-nid="[nid]" 
  data-toggle="modal" data-target="#modal-[nid]">[title]</a>
<div id="modal-[nid]" class="modal hide" tabindex="-1" role="dialog">
    <div class="modal-body">
        <button type="button" class="close" data-dismiss="modal" 
          aria-hidden="true">×</button>
        <span>this is a test of my modal</span>
    </div>
</div>

我以前从未尝试过这样的事情。我有加载的bootstrap CSS文件和JS文件。有没有人有任何想法我错了？

--- --- EDIT

我的退出按钮无效，看起来像这样：

它似乎没有加载html中的按钮...只显示x周围没有<button>标签。

Answer 1

你有一些错误。取出hide课程。将身体包裹在modal-content内和modal-dialog

内

<a href="#modal-1" class="ajax-link" data-nid="[nid]" data-toggle="modal" data-target="#modal-1">[title]</a>
  <div id="modal-1" class="modal" tabindex="-1" role="dialog">
    <div class="modal-dialog">
      <div class="modal-content">
      <div class="modal-body">
          <button type="button" class="close" data-dismiss="modal" 
            aria-hidden="true">×</button>
          <span>this is a test of my modal</span>
      </div>
    </div>
  </div>
</div>

http://www.bootply.com/124339