空“<div class="modal-backdrop fade in"></div>”

Question

我的代码中有模态问题，没有出现并且 div 和 class "modal-backdrop fade in" 是空的。

<body>
<button type="button" title="Usuń" class="deleteButton btn btn-default btn-xs pull-right">Usuń</button>

<div id="confirm" class="modal hide fade">
<div class="modal-body">
    Are you sure?
</div>
<div class="modal-footer">
    <button type="button" data-dismiss="modal" class="btn btn-primary" id="delete">Delete</button>
    <button type="button" data-dismiss="modal" class="btn">Cancel</button>
</div>

$("body").on('click', "button.deleteButton", function (e) {
  var clickedButton = $(this);
  e.preventDefault();
  $('#confirm').modal({ backdrop: 'static', keyboard: false })
    .one('click', '#delete', function () {
    clickedButton.attr("disabled", true);    
  });
});

这是我的 fiddle： https://jsfiddle.net/cjdtzsha/

可能是什么原因？

Answer 1

从 <div id="confirm" class="modal hide fade"> 中删除 hide class 它有 important 关于 display:none 的规则属性不允许模态显示。

Remove Hide Selector

现在添加 <div class="modal-content"></div> 并在其中包含 modal-header 和 modal-footer

Add modal-content

<div id="confirm" class="modal fade">
  <div class="modal-content">
    <div class="modal-body">
      Are you sure?
    </div>
    <div class="modal-footer">
      <button type="button" data-dismiss="modal" class="btn btn-primary" id="delete">Delete</button>
      <button type="button" data-dismiss="modal" class="btn">Cancel</button>
    </div>
  </div>
</div>

解决所有问题。

空“<div class="modal-backdrop fade in"></div>”

Empty "<div class="modal-backdrop fade in"></div>"

javascript

modal-dialog

bootstrap-modal

twitter-bootstrap-3