javascript 窗口加载蒙板 内嵌网页内容


Posted in Javascript onNovember 19, 2010
//初始化导航背景,iframe容器 
function fnDaoHangBg() 
{ 
var h = fnGetHeight(),w = fnGetWidth();//获取背景窗口大小 
if(!$('divDaoHangBg')) 
{ 
var div = $C('div');//创建背景蒙板 
div.id = 'divDaoHangBg'; 
div.style.backgroundColor = 'black'; 
div.style.position = 'absolute'; 
div.style.filter = 'alpha(opacity=80)'; 
div.style.opacity = '.80'; 
div.style.zIndex = 100001; 
div.style.left = 0; 
div.style.top = 0; 
div.style.width = w+'px'; 
div.style.height= h+'px'; 
document.body.appendChild(div); 
} if(!$('divDaoHangBgIframe')) 
{ 
var iframe; 
iframe = this.$C('IFRAME');//创建蒙板内的内嵌iframe容器,用于嵌入显示其他网页 
iframe.id = 'divDaoHangBgIframe'; 
iframe.frameBorder = '0'; 
iframe.scrolling = "no"; 
iframe.style.overflow = 'hidden'; 
iframe.allowTransparency = 'true'; 
iframe.style.display = 'none'; 
iframe.style.width = w+'px';//800 
iframe.style.height = h+'px';//620 
iframe.style.marginTop = '75px';//800 
$('divDaoHangBg').appendChild(iframe); 
} 
if(!$('divDaoHangBgClose')) 
{ 
var div = $C('div');//创建关闭按钮在蒙板上 
div.id = 'divDaoHangBgClose'; 
div.style.position = 'absolute'; 
div.style.backgroundImage='url(images/closb.gif)'; 
div.style.zIndex = 100003; 
div.style.right = 10; 
div.style.top = 20; 
div.style.width = '82px'; 
div.style.height= '30px'; 
div.title='关闭'; 
div.style.cursor='hand'; 
div.onclick=function(){//点击时间 ,关闭蒙板 
fnDaoHangBgClose(); 
}; 
$('divDaoHangBg').appendChild(div); 
} 
$('divDaoHangBgIframe').style.display='block'; 
$('divDaoHangBg').style.display='block'; 
} 
//关闭蒙板 
function fnDaoHangBgClose() 
{ 
if(!$('divDaoHangBg')){return;} 
if(!$('divDaoHangBgIframe')){return;} 
$('divDaoHangBgIframe').src=''; 
$('divDaoHangBgIframe').style.display='none'; 
$('divDaoHangBg').style.display='none'; 
} 
//调用,内嵌url 
function fnDaoHangBgShow(url) 
{ 
fnDaoHangBg(); 
$('divDaoHangBgIframe').src=url; 
}

其中 $()和$C()分别表示
$(id),获取该id的对象,document.getElementById(id)
$C(tag),创建一个标签, document.createElement(tag);
Javascript 相关文章推荐
dotopAlert 提示用户需安装播放器的代码
Sep 17 Javascript
thinkphp 表名 大小写 窍门
Feb 01 Javascript
JavaScript检查弹出窗口是否被阻拦的方法技巧
Mar 13 Javascript
JavaScript中this详解
Sep 01 Javascript
AngularJS基础 ng-list 指令详解及示例代码
Aug 02 Javascript
bootstrap快速制作后台界面
Dec 05 Javascript
JavaScript实现倒计时跳转页面功能【实用】
Dec 13 Javascript
bootstrap paginator分页插件的两种使用方式实例详解
Nov 14 Javascript
Vue表单demo v-model双向绑定问题
Jun 29 Javascript
解决Vue中 父子传值 数据丢失问题
Aug 27 Javascript
小程序使用watch监听数据变化的方法详解
Sep 20 Javascript
webpack常用配置总览(小结)
Nov 18 Javascript
JS运行耗时操作的延时显示方法
Nov 19 #Javascript
function foo的原型与prototype属性解惑
Nov 19 #Javascript
高亮显示web页表格行的javascript代码
Nov 19 #Javascript
javascript tips提示框组件实现代码
Nov 19 #Javascript
突发奇想的一个jquery插件
Nov 19 #Javascript
基于JQuery的访问WebService的代码(可访问Java[Xfire])
Nov 19 #Javascript
基于jQuery的获得各种控件Value的方法
Nov 19 #Javascript
You might like
第七节 类的静态成员 [7]
2006/10/09 PHP
PHP的类 功能齐全的发送邮件类
2006/10/09 PHP
php is_file 判断给定文件名是否为一个正常的文件
2010/05/10 PHP
php mb_substr()函数截取中文字符串应用示例
2014/07/29 PHP
PHP实现登陆表单提交CSRF及验证码
2017/01/24 PHP
php计算多个集合的笛卡尔积实例详解
2017/02/16 PHP
PHP+redis实现的悲观锁机制示例
2018/06/12 PHP
用正则获取指定路径文件的名称
2007/02/27 Javascript
JS链式调用的实现方法
2013/03/07 Javascript
使用js 设置url参数
2013/07/08 Javascript
浅析hasOwnProperty方法的应用
2013/11/20 Javascript
nodejs命令行参数处理模块commander使用实例
2014/09/17 NodeJs
javascript+ajax实现产品页面加载信息
2015/07/09 Javascript
vue.js学习之递归组件
2016/12/13 Javascript
Vue中的无限加载vue-infinite-loading的方法
2018/04/08 Javascript
微信小程序自定义组件的实现方法及自定义组件与页面间的数据传递问题
2018/10/09 Javascript
你或许不知道的一些npm实用技巧
2019/07/04 Javascript
Vue如何循环提取对象数组中的值
2020/11/18 Vue.js
Python入门_浅谈逻辑判断与运算符
2017/05/16 Python
python输出100以内的质数与合数实例代码
2018/07/08 Python
用python标准库difflib比较两份文件的异同详解
2018/11/16 Python
对python 通过ssh访问数据库的实例详解
2019/02/19 Python
Python 实现Image和Ndarray互相转换
2020/02/19 Python
Tensorflow中批量读取数据的案列分析及TFRecord文件的打包与读取
2020/06/30 Python
css3中transition属性详解
2014/09/02 HTML / CSS
茱莉蔻美国官网:Jurlique美国
2020/11/24 全球购物
编程实现去掉XML的重复结点
2014/05/28 面试题
Hibernate持久层技术
2013/12/16 面试题
2014学雷锋活动总结
2014/03/09 职场文书
分公司经理任命书
2014/06/05 职场文书
教师竞聘上岗演讲稿
2014/09/03 职场文书
党员个人对照检查材料范文
2014/09/24 职场文书
自查自纠整改报告
2014/11/06 职场文书
高中生综合素质自我评价
2015/03/06 职场文书
学校办公室主任岗位职责
2015/04/01 职场文书
2016应届毕业生自荐信范文
2016/01/28 职场文书