弹出居中iframe窗口，点击其它位置消失

最新推荐文章于 2023-09-11 16:08:13 发布

weixin_33949359

最新推荐文章于 2023-09-11 16:08:13 发布

阅读量169

点赞数

文章标签： python javascript ViewUI

原文链接：https://my.oschina.net/lantianbaiyun/blog/601202

版权

2019独角兽企业重金招聘Python工程师标准>>>

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();
});

转载于:https://my.oschina.net/lantianbaiyun/blog/601202