使用 Layer 弹出 iframe 层,并让 iframe 自适应内容宽高
<div id="cnblogs_post_body">1.Layer简介layer 是一款使用非常方便且功能强健的 jQuery 弹出层插件,对各类浏览器中的兼容性也很好。使用它可以创建出交互体验更好的 Web 应用程序。
layer 的维护人员是一群和小G年龄相仿,富有激情的前端开发人员,所以大家不用担心它的升级问题。
layer 的官方网址:layer 官方演示与讲解
2.Layer的使用
(1) 访问官网下载最新版本的 layer,解压并将 插件添加至项目的根目录下;
(2) 在需要弹出层的页面引入 layer.min.js 文件(注意不要忘了引入 jQuery 类库),该文件包含内容即 layer 插件;
(3) 在适应的位置,添加 layer 的生成代码,示例如下:
<div id="codeSnippetWrapper" style="overflow: auto; cursor: text; font-size: 8pt; font-family: 'Courier New', courier, monospace; direction: ltr; text-align: left; margin: 20px 0px 10px; line-height: 12pt; max-height: 200px; width: 97.5%; background-color: #f4f4f4; border: silver 1px solid; padding: 4px;"><div id="codeSnippet" style="overflow: visible; font-size: 8pt; font-family: 'Courier New', courier, monospace; color: black; direction: ltr; text-align: left; line-height: 12pt; width: 100%; background-color: #f4f4f4; border-style: none; padding: 0px;">$.layer({ shade: '#000', false], type: 2, iframe: { src: 'DataList.aspx' }, title: ['', false], closeBtn: true], area: ['600px', '300px'], move: ['.xubox_border', true], offset: ['', ''], success: function(layer) { // 这里定义弹出层加载成功后要执行的内容 } });
页:
[1]