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

Answer 2

只需通过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
})

在这里有一个厕所：

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

或删除外部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

Bootstrap模态未显示

2 个答案: