Bootstrap(v3.1.1)模式不显示

时间:2014-04-06 19:00:06

标签: javascript css twitter-bootstrap

我已经查看了各种解决方案,但似乎无法实现这一点。我使用以下代码创建了一个模态:

<div aria-hidden='true' aria-labelledby='newSpeakerLabel' class='modal fade speaker-form' role='dialog' tabindex='-1'>
  <div class='modal-dialog'>
    <div class='modal content'>
      <div class='modal-header'>
        <button aria-hidden='true' class='close' data-dismiss='modal' type='button'>&times;</button>
        <h4 class='modal-title' id='newSpeakerLabel'>New Speaker</h4>
      </div>
      <div class='modal-body'>
        Put the form here
      </div>
      <div class='modal-footer'>
        <button class='btn btn-default' data-dismiss='modal' type='button'>Close</button>
        <button class='btn btn-primary' type='button'>Save Speaker</button>
      </div>
    </div>
  </div>
</div>
<h1>Speakers</h1>
<div class='well bs-component'>
  <fieldset>
    <!-- Display each speaker -->
    <!-- Link that launches the modal -->
    <button class='btn btn-primary btn-sm' data-target='.speaker-form' data-toggle='modal'>Add speaker</button>
  </fieldset>
</div>

当我点击“添加扬声器”按钮时,所有发生的事情都是页面变暗,就好像模式会出现但它从不显示。有任何想法吗?谢谢! (是的,我添加了bootstrap.min.js文件)。

1 个答案:

答案 0 :(得分:2)

您错过了modal-content班级

中的短划线

更改

<div class='modal content'>

为...

<div class='modal-content'>