Bootstrap Modal对话框不显示

Question

I am trying to make it so when a user clicks on a button, a modal dialog opens and another site is loaded within that dialog.. I have used some tutorials and still cant seem to get it working correctly.. currently when i click the button, the screen just goes slightly grey but no dialog appears.. can anyone see where im going wrong?

<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

I found below java script code(cross domain loading code) from this link . In this link go and review the answer given by Manoz. And for creating bootstrap modal dynamically go to this link . Bootstrap modal link will help you to create each and every modal dynamically rather then creating them manually everytime.

 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>