부트 스트랩 모달 대화 상자가 표시되지 않습니다.

Question

버튼을 클릭하면 모달 대화 상자가 열리 며 다른 사이트가 해당 대화 상자에로드됩니다. 일부 자습서를 사용했지만 여전히 작동하지 않는 것처럼 보입니다. 정확하게 .. 현재 버튼을 클릭하면 화면이 약간 회색으로 표시되지만 대화 상자는 나타나지 않습니다. 누군가가 잘못된 부분을 볼 수 있습니까?

<a href="www.google.co.uk" class="btn bootpopup" title="This is title" target="popupModal2">Visit site</a> 

<div id="popupModal2" class="modal hide fade" tabindex="-1" role="dialog"> 
    <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal">×</button> 
      <h3>Add new Item</h3> 
    </div> 
    <div class="modal-body"> 
     <iframe src="" style="zoom:0.60" frameborder="0" height="250" width="99.6%"></iframe> 
    </div> 
    <div class="modal-footer"> 
     <button class="btn" data-dismiss="modal">OK</button> 
    </div> 

자바 스크립트

 $('.bootpopup').click(function(){ 
    var frametarget = $(this).attr('href'); 
    var targetmodal = $(this).attr('target'); 
    if (targetmodal == undefined) { 
    targetmodal = '#popupModal'; 
    } else { 
    targetmodal = '#'+targetmodal; 
    } 
    if ($(this).attr('title') != undefined) { 
    $(targetmodal+ ' .modal-header h3').html($(this).attr('title')); 
    $(targetmodal+' .modal-header').show(); 
    } else { 
    $(targetmodal+' .modal-header h3').html(''); 
    $(targetmodal+' .modal-header').hide(); 
    } 
    $(targetmodal).on('show', function() { 
     $('iframe').attr("src", frametarget); 
    }); 
    $(targetmodal).modal({show:true}); 
    return false; 

}); 

Answer 1

내가 this link에서 자바 스크립트 코드 (크로스 도메인 로딩 코드) 아래에서 발견했다. 이 링크에서 Manoz가 제공 한 답변을 검토하십시오. 부트 스트랩 모달을 동적으로 생성하려면 this link으로 이동하십시오. 부트 스트랩 모달 링크는 매번 수동으로 작성하는 대신 모든 모달을 동적으로 작성하는 데 도움이됩니다.

function openSite() { 
 
    BootstrapDialog.show({ 
 
    title: 'Level 2 Title', 
 
    message: $('<div id="loadCrossoriginHere"></div>'), 
 
    onshown: function() { 
 
     $.ajaxSetup({ 
 
     scriptCharset: "utf-8", //maybe "ISO-8859-1" 
 
     contentType: "application/json; charset=utf-8" 
 
     }); 
 

 
     $.getJSON('http://whateverorigin.org/get?url=' + 
 
     encodeURIComponent('http://google.co.uk') + '&callback=?', 
 
     function(data) { 
 
      $("#loadCrossoriginHere").html(data.contents); 
 
     }); 
 
    } 
 
    }); 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.35.3/css/bootstrap-dialog.min.css" rel="stylesheet"> 
 

 

 
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.35.3/js/bootstrap-dialog.min.js"></script> 
 

 

 

 
<button type="button" class="btn btn-primary" onclick="openSite()">Visit Site</button>