javascript - Bootstrap 模式未显示

Question

我正在尝试从 JavaScript 调用 Bootstrap 模态，不幸的是我只看到模态背景。

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

这是一个 jsfidle 示例

http://jsfiddle.net/Y68Fx/

Answer 1

您正在将模式对话框 div 包装在另一个 div 中。将其移到文档正文之外。检查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');