Bootstrap creates too many backdrops

Refresh

March 2019

Views

77 time

1

I need to load pieces of HTML dynamically when certain events occur within the application. Some of these pieces of HTML may be modal dialogs. It should be fine, however when displayed, the modals create too many backdrops.

The following sample illustrate the problem (tested on Google Chrome).

var html = '<div class="modal fade" tabindex="-1" role="dialog"> ' +
'  <div class="modal-dialog"> ' +
'    <div class="modal-content"> ' +
'      <div class="modal-header"> ' +
'        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> ' +
'        <h4 class="modal-title">Modal title</h4> ' +
'      </div> ' +
'      <div class="modal-body"> ' +
'        <p>One fine body&hellip;</p> ' +
'      </div> ' +
'      <div class="modal-footer"> ' +
'        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> ' +
'        <button type="button" class="btn btn-primary">Save changes</button> ' +
'      </div> ' +
'    </div><!-- /.modal-content --> ' +
'  </div><!-- /.modal-dialog --> ' +
'</div><!-- /.modal --> ';

var dlg = $(html).appendTo('body');

setTimeout(function () {
  
   dlg.modal({
     //backdrop: false,
     keyboard: false
   });
  
}, 1000);
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>


<div>Hello</div>

Why does this happen, and how can this be fixed without requiring a "reusable" modal container?

1 answers

2

Use $(".modal") instead of the dlg variable to call the modal.

var html = '<div class="modal fade" tabindex="-1" role="dialog"> ' +
'  <div class="modal-dialog"> ' +
'    <div class="modal-content"> ' +
'      <div class="modal-header"> ' +
'        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> ' +
'        <h4 class="modal-title">Modal title</h4> ' +
'      </div> ' +
'      <div class="modal-body"> ' +
'        <p>One fine body&hellip;</p> ' +
'      </div> ' +
'      <div class="modal-footer"> ' +
'        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> ' +
'        <button type="button" class="btn btn-primary">Save changes</button> ' +
'      </div> ' +
'    </div><!-- /.modal-content --> ' +
'  </div><!-- /.modal-dialog --> ' +
'</div><!-- /.modal --> ';

$(html).appendTo('body');

setTimeout(function () {
  
   $(".modal").modal({
     //backdrop: false,
     keyboard: false
   });
  
}, 1000);
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>


<div>Hello</div>