Iframe中的模态框的页面自适应

场景描述： Web页面使用Iframe作为主要的显示区，当在Iframe页面设置模态弹出框时，需要对其显示的宽高进行动态调整。

大致思路是：

获取到遮罩层的宽、高

获取模态框的宽高

根据遮罩层和模态框的宽高比较，动态调整模态框的宽高

这里默认大家可以布局出这样的模态框，也就是涉及到

CSS

知识的使用。下面是具体的做法：

<div class="shade"> </div>
<div class="DialogView">
<!-- 放置模态框要显示的内容 -->
</div>

有了以上的布局，只需要些许的

javascript

代码，就可以设置模态框的动态宽高。注意 这里要用到

jQuery

。代码如下：

<script type="text/javascript">
if ($(".DialogView").width() > $(".shade").width() - 150)//浏览器当前窗口文档body的高度
{
$(".DialogView").width($(".shade").width() - 150);
}
if ($(".DialogView").height() > $(".shade").height() - 150)//浏览器当前窗口文档body的高度
{
$(".DialogView").height($(".shade").height() - 150);
}
</script>

两次判断，150是作为调整值，用来调整距离Iframe的远近。