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 相关文章推荐
客户端限制只能上传jpg格式图片的js代码
Dec 09 Javascript
浅谈Javascript面向对象编程
Nov 15 Javascript
javaScript让文本框内的最后一个文字的后面获得焦点实现代码
Jan 06 Javascript
jQuery获取节点和子节点文本的方法
Jul 22 Javascript
分享10个优化代码的CSS和JavaScript工具
May 11 Javascript
JavaScript来实现打开链接页面的简单实例
Jun 02 Javascript
利用Vue.js实现checkbox的全选反选效果
Jan 18 Javascript
vue2.0 资源文件assets和static的区别详解
Apr 08 Javascript
mpvue性能优化实战技巧(小结)
Apr 17 Javascript
使用Vue.js 和Chart.js制作绚丽多彩的图表
Jun 15 Javascript
laypage+SpringMVC实现后端分页
Jul 27 Javascript
vue项目中openlayers绘制行政区划
Dec 24 Vue.js
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
PHP学习笔记 IIS7下安装配置php环境
2012/10/29 PHP
php实现获取局域网所有用户的电脑IP和主机名、及mac地址完整实例
2014/07/18 PHP
PHP实现一维数组转二维数组的方法
2015/02/25 PHP
PHP获取photoshop写入图片文字信息的方法
2015/03/31 PHP
CodeIgniter与PHP5.6的兼容问题
2015/07/16 PHP
php实现统计二进制中1的个数算法示例
2018/01/23 PHP
如何让PHP编码更加好看利于阅读
2019/05/12 PHP
js window.event对象详尽解析
2009/02/17 Javascript
Javascript Cookie读写删除操作的函数
2010/03/02 Javascript
JavaScript的9种继承实现方式归纳
2015/05/18 Javascript
JavaScript如何动态创建table表格
2020/08/02 Javascript
jQuery实现图片文字淡入淡出效果
2015/12/21 Javascript
AngularJS国际化详解及示例代码
2016/08/18 Javascript
JS 根据子网掩码,网关计算出所有IP地址范围示例
2020/04/23 Javascript
Angular的模块化(代码分享)
2016/12/26 Javascript
JavaScript表单即时验证 验证不成功不能提交
2017/08/31 Javascript
JavaScript分步实现一个出生日期的正则表达式
2018/03/22 Javascript
微信小程序中使用ECharts 异步加载数据实现图表功能
2018/07/13 Javascript
默认浏览器设置及vue自动打开页面的方法
2018/09/21 Javascript
js遍历详解(forEach, map, for, for...in, for...of)
2019/08/28 Javascript
webpack 最佳配置指北(推荐)
2020/01/07 Javascript
python list删除元素时要注意的坑点分享
2018/04/18 Python
解决python彩色螺旋线绘制引发的问题
2019/11/23 Python
python 已知一个字符,在一个list中找出近似值或相似值实现模糊匹配
2020/02/29 Python
PyQt5中向单元格添加控件的方法示例
2020/03/24 Python
教你一分钟在win10终端成功安装Pytorch的方法步骤
2021/01/28 Python
解决CSS3的opacity属性带来的层叠顺序问题
2016/05/09 HTML / CSS
联想墨西哥官方网站:Lenovo墨西哥
2016/08/17 全球购物
大学教师年终总结的自我评价
2013/10/29 职场文书
销售实习自我鉴定
2013/12/07 职场文书
《湘夫人》教学反思
2014/02/21 职场文书
大学生新学期计划书
2014/04/28 职场文书
格列夫游记读书笔记
2015/07/01 职场文书
任命书格式范文
2015/09/22 职场文书
PyTorch梯度裁剪避免训练loss nan的操作
2021/05/24 Python
Java实现HTML转为Word的示例代码
2022/06/28 Java/Android