ブートストラップモーダルダイアログが表示されない

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

Iはthis linkからJavaスクリプトコード（クロスドメインローディングコード）下記の通り。このリンクでは、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>