1.html
<a class="info_show" href="javascript:;" onclick="detail(22)" >弹出详情</a><br />
<iframe id="myFrameId" src="https://www.baidu.com" name="myFrameName" scrolling="no" frameborder="0"></iframe>
2.css
#myFrameId{
width:800px;
height:600px;
position: absolute;
display:none;
}
3.js
function detail(id){
$('#myFrameId').attr('src','https://www.baidu.com');
$('#myFrameId').show();
iframe_height = $(window).height()-600;
iframe_width = $(document).width()-800;
iframe_height>0?iframe_height=(iframe_height/2):iframe_height=0;
iframe_width>0?iframe_width=(iframe_width/2):iframe_width=0;
$('#myFrameId').css('top',iframe_height);
$('#myFrameId').css('left',iframe_width);
}
$(document).on("click", function(e){
console.log('123');
$('#myFrameId').hide();
});
$(".myFrameId,.info_show").on("click", function(e){
console.log('456');
e.stopPropagation();
});