使用 Layer 弹出 iframe 层，并让 iframe 自适应内容宽高

1.Layer简介

layer 是一款使用非常方便且功能强健的 jQuery 弹出层插件，对各类浏览器中的兼容性也很好。使用它可以创建出交互体验更好的 Web 应用程序。

layer 的维护人员是一群和小G年龄相仿，富有激情的前端开发人员，所以大家不用担心它的升级问题。

layer 的官方网址：layer 官方演示与讲解

2.Layer的使用

(1) 访问官网下载最新版本的 layer，解压并将 插件添加至项目的根目录下；

(2) 在需要弹出层的页面引入 layer.min.js 文件(注意不要忘了引入 jQuery 类库)，该文件包含内容即 layer 插件；

(3) 在适应的位置，添加 layer 的生成代码，示例如下：

$.layer({

<!--CRLF-->

         shade: [0.5, '#000', false],

<!--CRLF-->

         type: 2,

<!--CRLF-->

         iframe: {

<!--CRLF-->

             src: 'DataList.aspx'

<!--CRLF-->

         },

<!--CRLF-->

         title: ['', false],

<!--CRLF-->

         closeBtn: [1, true],

<!--CRLF-->

         area: ['600px', '300px'],

<!--CRLF-->

         move: ['.xubox_border', true],

<!--CRLF-->

         offset: ['', ''],

<!--CRLF-->

         success: function(layer) {

<!--CRLF-->

             // 这里定义弹出层加载成功后要执行的内容

<!--CRLF-->

         }

<!--CRLF-->

     });

<!--CRLF-->

小G在这里演示的是使用 layer 的 iframe 层加载数据，layer 提供了信息框、询问框、页面层、iframe 和 tips 等多种展示方式，具体使用方式请参见官网的示例和API。

3.网页效果展示

示例程序中，我在链接的 click 事件绑定了 layer 的弹出方法，iframe 引用的页面中，通过异步方式获取数据库列表以及数据。为了让演示效果更美观，小G在示例程序中控制了 layer 弹出层及 iframe 的宽高。

这里特别说明一下，iframe 自适应宽高有两种方式，可以在 iframe 的容器页进行控制，或者在 iframe 所容纳的子页面进行控制，具体请参见园友的文章《jquery 实现iframe 自适应高度》。这里小G使用的是第二种方式，因为数据异步加载完成后我们才能得到真实的内容页宽高。

猛击这里下载示例源码