twitter-bootstrap - Bootstrap 模式错误 - 只有黑色区域没有窗口

Question

屏幕截图 - http://screencast.com/t/DxdVjiC7idUl

<div id="edit_form" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">?</button>
      <h3 id="myModalLabel">Редактирование объекта</h3>
    </div>
    <div class="modal-body" id="fm_edit_obj">
    </div>
    <div class="modal-footer">
      <button class="btn" data-dismiss="modal" aria-hidden="true">Отменить</button>
      <button class="btn btn-primary">Сохранить изменения</button>
    </div>
  </div>

点击图片 -

$('#edit_form').modal({'show' : true});

为什么我看不到窗口，只能看到背景？

Answer 1

使用 bootstrap 文档作为指南，假设您使用 bootstrap v3，您缺少“modal-dialog”和“modal-content”div。在这里，我更改并测试了您的代码:

  <div id="edit_form" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-hidden="true">?</button>
              <h3 id="myModalLabel">Редактирование объекта</h3>
            </div>
            <div class="modal-body" id="fm_edit_obj">
            BODY
            </div>
            <div class="modal-footer">
              <button class="btn" data-dismiss="modal" aria-hidden="true">Отменить</button>
              <button class="btn btn-primary">Сохранить изменения</button>
            </div>  
        </div>
    </div>
  </div>
  <img src="/img/knot.jpg" alt="" id="myimg">

<script>
$('#myimg').click(function(){
    $('#edit_form').modal('show');
});
</script>