Bootstrap Modal对话框不显示

我想让它如此，当用户点击一个按钮时，模态对话框打开，另一个站点在该对话框中加载..我用了一些教程，仍然无法使它工作正确..当前当我点击按钮，屏幕只是有点灰色，但没有对话框出现..任何人都可以看到哪里即将出错？Bootstrap Modal对话框不显示

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

});

来源

2016-12-22 user2964762

我发现下面的java脚本代码（跨域加载代码）从this link。在这个链接去审查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>

来源

2016-12-22 11:32:10

Bootstrap Modal对话框不显示

回答

相关问题