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

我在this link下面找到了java脚本代码（跨域加载代码）。在此链接中，查看Manoz给出的答案。要动态创建bootstrap模态，请转到this link。 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>

Bootstrap模态对话框未显示

1 个答案: