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

Question

I have problem with modal in my code, there is not appear and div with class "modal-backdrop fade in" is empty.

<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);    
  });
});

Here is my fiddle: https://jsfiddle.net/cjdtzsha/

What can be reason for it?

Answer 1

Remove hide class from <div id="confirm" class="modal hide fade"> it has important rule on display:none property not letting the modal show.

Remove Hide Selector

Now add <div class="modal-content"></div> and enclose modal-header and modal-footer inside it

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>

Fix all issues.

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

Question

1 answers

solution1
2 ACCPTED 2016-01-22 19:32:56

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

Question

1 answers

solution1 2 ACCPTED 2016-01-22 19:32:56

solution1
2 ACCPTED 2016-01-22 19:32:56