Bootstrap modal is not showing

Question

I am trying to call Bootstrap modal from JavaScript and unfortunately I'm only seeing the modal backdrop.

var newDiv = $(document.createElement('div'));
$(newDiv).html('\
            <div class="modal fade">\
              <div class="modal-dialog">\
                <div class="modal-content">\
                  <div class="modal-header">\
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>\
                    <h4 class="modal-title">Modal title</h4>\
                  </div>\
                  <div class="modal-body">\
                    <div id="drillDownContainer">\
                  </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>\
              </div>\
            </div>\
    ');
$(newDiv).modal('show');

Here is a jsfidle example

http://jsfiddle.net/Y68Fx/

Answer 1

just call your Dialog via ID :

var newDiv = $(document.createElement('div'));
$(newDiv).html('\
            <div id="dummy" class="modal fade">\
              <div class="modal-dialog">\
                <div class="modal-content">\
                  <div class="modal-header">\
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>\
                    <h4 class="modal-title">Modal title</h4>\
                  </div>\
                  <div class="modal-body">\
                    <div id="drillDownContainer">\
                  </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>\
              </div>\
            </div>\
    ');

$(newDiv).modal({
  keyboard: false
})

have a loock here:

 $('#dummy').modal('show');

or remove the outer div :

 var newDiv = $(document.createElement('div'));
    $(newDiv).html('\
                  <div class="modal-dialog">\
                    <div class="modal-content">\
                      <div class="modal-header">\
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>\
                        <h4 class="modal-title">Modal title</h4>\
                      </div>\
                      <div class="modal-body">\
                        <div id="drillDownContainer">\
                      </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>\
                  </div>   ').addClass('modal fade');

    $(newDiv).modal('show');

js fiddle

Answer 2

You are wrapping the modal dialog div in another div. Move it outside to the body of the document. Check the fiddle

 var newDiv = '<div class="modal fade">\
          <div class="modal-dialog">\
            <div class="modal-content">\
              <div class="modal-header">\
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>\
                <h4 class="modal-title">Modal title</h4>\
              </div>\
              <div class="modal-body">\
                <div id="drillDownContainer">\
              </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>\
          </div>\
        </div>\
 ';
 $(newDiv).appendTo('body');

 $(newDiv).modal('show');