부트 스트랩 모달이 표시되지 않습니다.

Question

자바 스크립트에서 부트 스트랩 모달을 호출하려고하는데 불행히도 모달 배경 만보고 있습니다. 여기

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 포장되어 있습니다. 문서 본문 외부로 이동하십시오. 다만 ID를 통해 대화를 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

전화 체크 :

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

여기 loock 있습니다

$('#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을