모달 문제 부트 스트랩

Question

sample.html을 클릭하는 동안이 페이지에서 내가 home.cfm 및

home.html로 아래의 내용을라는 모달를 열고 위의 버튼을 클릭에 다음과 같이

<button data-toggle="modal" class="btn btn-info" onclick="location.href='home.html'" data-target="#testModal">button</button> 

로 버튼을했다 :

<div id="testModal" class="modal fade" role="dialog"> 
    <div class="modal-dialog"> 

    <!-- Modal content--> 
    <div class="modal-content"> 

     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal">&times;</button> 
     <h4 class="modal-title">Modal Header</h4> 
     </div> 

     <div class="modal-body"> 
     <p>Some text in the modal.</p> 
     </div> 

     <div class="modal-footer"> 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     </div> 

    </div> 

    </div> 
</div> 

는 있지만 모달 도움이 opening.please 없습니다

Answer 1

home.html 파일에서 모달 순응 데이터를 호출해야하므로 아래 코드를 sample.html 파일에 넣어야합니다.

<button class="btn btn-info" onclick="show_modal('home.html','Home page','')">button</button> 

<div class="modal fade bs-modal-sm" id="modal" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true"> 
    <div class="modal-dialog animated bounceIn"> 
     <div class="modal-content"> 
     </div> 
    </div> 
</div> 

하나의 함수를 js 파일에 추가하고 해당 js 파일의 참조를 sample.html에 추가하십시오.

function show_modal(target, title, size) { 

    jQuery('#modal').removeData('bs.modal'); 
    jQuery('.modal-content').html(''); 
    jQuery('.modal-dialog').removeClass('modal-lg'); 
    jQuery('#modal').removeClass('create_event_task'); 
    jQuery('.modal-dialog').addClass(size); 
    var newTarget = target.indexOf("?") >= 0 ? target + '&modal-title=' + title : target + '?modal-title=' + title; 
    jQuery('#modal').modal({remote: encodeURI(newTarget)}); 
} 

아래 코드를 home.html 파일에 추가하십시오.

<div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal">&times;</button> 
     <h4 class="modal-title">Modal Header</h4> 
     </div> 

     <div class="modal-body"> 
     <p>Some text in the modal.</p> 
     </div> 

     <div class="modal-footer"> 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     </div> 

이 정보가 도움이되기를 바랍니다.