Bootstrap Modal dialogue n'affiche pas

Question

J'essaie de le faire quand un utilisateur clique sur un bouton, une boîte de dialogue modale s'ouvre et un autre site est chargé dans cette boîte de dialogue .. J'ai utilisé quelques tutoriels et je n'arrive toujours pas à le faire fonctionner correctement .. actuellement quand je clique sur le bouton, l'écran va juste légèrement gris mais aucune boîte de dialogue n'apparaît .. quelqu'un peut-il voir où je vais mal?

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

javascript

 $('.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

Je trouve ci-dessous le code java script (cross domain code de chargement) de this link. Dans ce lien allez et passez en revue la réponse donnée par Manoz. Et pour créer dynamiquement bootstrap modal aller à this link. Le lien modal Bootstrap vous aidera à créer dynamiquement chaque modal plutôt que de les créer manuellement à chaque fois.

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>