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的远近。