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 相关文章推荐
js Html结构转字符串形式显示代码
Nov 15 Javascript
ASP.NET jQuery 实例4(复制TextBox的文本到本地剪贴板上)
Jan 13 Javascript
jqGrid日期格式的判断示例代码(开始日期与结束日期)
Nov 08 Javascript
js清空form表单中的内容示例
May 20 Javascript
javascript实现获取服务器时间
May 19 Javascript
jquery实现表单验证并阻止非法提交
Jul 09 Javascript
jQuery实现公告新闻自动滚屏效果实例代码
Jul 14 Javascript
详解JS中定时器setInterval和setTImeout的this指向问题
Jan 06 Javascript
angularjs实现的前端分页控件示例
Feb 10 Javascript
详解angular脏检查原理及伪代码实现
Jun 08 Javascript
JavaScript创建对象的四种常用模式实例分析
Jan 11 Javascript
vue 中使用 watch 出现了如下的报错的原因分析
May 21 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
php的ajax框架xajax入门与试用介绍
2010/12/19 PHP
浅谈php中include文件变量作用域
2015/06/18 PHP
WordPress中邮件的一些修改和自定义技巧
2015/12/15 PHP
Ajax+Jpgraph实现的动态折线图功能示例
2019/02/11 PHP
JavaScript 创建对象
2009/07/17 Javascript
JavaScript 面向对象之命名空间
2010/05/04 Javascript
Jquery插件写法笔记整理
2012/09/06 Javascript
把jQuery的类、插件封装成seajs的模块的方法
2014/03/12 Javascript
Underscore.js 1.3.3 中文注释翻译说明
2015/06/25 Javascript
angularJS与bootstrap结合实现动态加载弹出提示内容
2015/10/16 Javascript
详解Javascript模板引擎mustache.js
2016/01/20 Javascript
vue源码学习之Object.defineProperty对象属性监听
2018/05/30 Javascript
Vue中mintui的field实现blur和focus事件的方法
2018/08/25 Javascript
webuploader分片上传的实现代码(前后端分离)
2018/09/10 Javascript
利用Vue构造器创建Form组件的通用解决方法
2018/12/03 Javascript
vue-cli3中vue.config.js配置教程详解
2019/05/29 Javascript
node.js中fs文件系统模块的使用方法实例详解
2020/02/13 Javascript
[03:03]DOTA2 2017国际邀请赛开幕战队入场仪式
2017/08/09 DOTA
解决pyqt中ui编译成窗体.py中文乱码的问题
2016/12/23 Python
Python中使用haystack实现django全文检索搜索引擎功能
2017/08/26 Python
Python中list查询及所需时间计算操作示例
2018/06/21 Python
使用Python实现一个栈判断括号是否平衡
2018/08/23 Python
python 2.7.13 安装配置方法图文教程
2018/09/18 Python
基于Python在MacOS上安装robotframework-ride
2018/12/28 Python
numpy数组之存取文件的实现示例
2019/05/24 Python
Python3.x+迅雷x 自动下载高分电影的实现方法
2020/01/12 Python
python数据预处理方式 :数据降维
2020/02/24 Python
css3截图_动力节点Java学院整理
2017/07/11 HTML / CSS
工商管理应届生求职信
2013/10/07 职场文书
十八届三中全会个人学习材料
2014/02/13 职场文书
机电专业求职信
2014/06/14 职场文书
声乐专业大学生职业生涯规划书:理想的未来需要自己去打造
2014/09/20 职场文书
民主生活会对照检查材料范文
2014/10/01 职场文书
无财产离婚协议书范本
2014/10/28 职场文书
sql注入教程之类型以及提交注入
2021/08/02 MySQL
JavaScript高级程序设计之变量与作用域
2021/11/17 Javascript