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 相关文章推荐
面向对象继承实例(a如何继承b问题)(自写)
Jul 01 Javascript
jquery submit ie6下失效的原因分析及解决方法
Nov 15 Javascript
微信小程序 设置启动页面的两种方法
Mar 09 Javascript
Vue计算属性的使用
Aug 04 Javascript
在vue中通过axios异步使用echarts的方法
Jan 13 Javascript
微信小程序实现左右联动的实战记录
Jul 05 Javascript
js如何获取访问IP、地区、当前操作浏览器
Jul 23 Javascript
webpack的tree shaking的实现方法
Sep 18 Javascript
js实现左右轮播图
Jan 09 Javascript
JS数据类型判断的几种常用方法
Jul 07 Javascript
如何使用gpu.js改善JavaScript的性能
Dec 01 Javascript
JS+CSS实现动态时钟
Feb 19 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
判断Keep-Alive模式的HTTP请求的结束的实现代码
2011/08/06 PHP
PHP分页效率终结版(推荐)
2013/07/01 PHP
php动态函数调用方法
2015/05/21 PHP
php验证手机号码
2015/11/11 PHP
Laravel中七个非常有用但很少人知道的Carbon方法
2017/09/21 PHP
JavaScript confirm选择判断
2008/10/18 Javascript
JQuery 表单中textarea字数限制实现代码
2009/12/07 Javascript
getAsDataURL在Firefox7.0下无法预览本地图片的解决方法
2013/11/15 Javascript
Node.js中Request模块处理HTTP协议请求的基本使用教程
2016/03/31 Javascript
第六章之辅组类与响应式工具
2016/04/25 Javascript
JS随机打乱数组的方法小结
2016/06/22 Javascript
JS实现用户注册时获取短信验证码和倒计时功能
2016/10/27 Javascript
Angular.js与node.js项目里用cookie校验账户登录详解
2017/02/22 Javascript
Angular5.1新功能分享
2017/12/21 Javascript
Vue在页面右上角实现可悬浮/隐藏的系统菜单
2018/05/04 Javascript
Vue常用指令详解分析
2018/08/19 Javascript
Node.js之删除文件夹(含递归删除)代码实例
2019/09/09 Javascript
[01:48:04]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Elephant BO3 第一场 2月7日
2021/03/11 DOTA
python网络编程学习笔记(二):socket建立网络客户端
2014/06/09 Python
Python中的并发编程实例
2014/07/07 Python
PHP网页抓取之抓取百度贴吧邮箱数据代码分享
2016/04/13 Python
python将list转为matrix的方法
2018/12/12 Python
使用Nibabel库对nii格式图像的读写操作
2020/07/01 Python
python利用google翻译方法实例(翻译字幕文件)
2020/09/21 Python
使用py-spy解决scrapy卡死的问题方法
2020/09/29 Python
Sunglasses Shop德国站:欧洲排名第一的太阳镜网站
2017/08/01 全球购物
当一个对象被当作参数传递到一个方法后,此方法可改变这个对象的属性,并可返回变化后的结果,那么这里到底是值传递还是引用传递?
2014/09/09 面试题
运动会开幕式邀请函
2014/01/22 职场文书
中学教师请假制度
2014/02/03 职场文书
中学生教师节演讲稿
2014/09/03 职场文书
工作业绩不及格检讨书
2014/10/28 职场文书
2015商场元旦促销活动策划方案
2014/12/09 职场文书
Python代码风格与编程习惯重要吗?
2021/06/03 Python
详解Python中*args和**kwargs的使用
2022/04/07 Python
生命的关键成分来自太空?陨石说是的
2022/04/29 数码科技
苹果macOS 13开发者预览版Beta 8发布 正式版10月发布
2022/09/23 数码科技