引导模态对话框未显示

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>

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

我从此链接中找到了下面的Java脚本代码（跨域加载代码）。在此链接中，请查看Manoz给出的答案。并且要动态创建Bootstrap模式，转到此链接。Bootstrap模态链接将帮助您动态创建每一个模式，而不是每次手动创建它们。

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>