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 相关文章推荐
jquery $.ajax各个事件执行顺序
Oct 15 Javascript
js通过location.search来获取页面传来的参数
Sep 11 Javascript
jQuery EasyUI 菜单与按钮之创建简单的菜单和链接按钮
Nov 18 Javascript
动态加载js、css的简单实现代码
May 26 Javascript
JS 获取HTML标签内的子节点的方法
Sep 21 Javascript
jQuery.cookie.js使用方法及相关参数解释
Mar 06 Javascript
JS实现的模仿QQ头像资料卡显示与隐藏效果
Apr 07 Javascript
AngularJS动态添加数据并删除的实例
Feb 27 Javascript
jQuery实现常见的隐藏与展示列表效果示例
Jun 04 jQuery
Vue学习之axios的使用方法实例分析
Jan 06 Javascript
node.js中npm包管理工具用法分析
Feb 14 Javascript
解决echarts图表使用v-show控制图表显示不全的问题
Jul 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
一步一步学习PHP(7) php 字符串相关应用
2010/03/05 PHP
解析zend studio中直接导入svn中的项目的方法步骤
2013/06/21 PHP
2014最热门的24个php类库汇总
2014/12/18 PHP
php中实现获取随机数组列表的自定义函数
2015/04/02 PHP
PHP使用socket发送HTTP请求的方法
2016/02/14 PHP
浅谈PHP中如何实现Hook机制
2017/11/14 PHP
Javascript学习笔记一 之 数据类型
2010/12/15 Javascript
JS仿flash上传头像效果实现代码
2011/07/18 Javascript
用nodejs写的一个简单项目打包工具
2013/05/11 NodeJs
Jquery实现网页跳转或用命令打开指定网页的解决方法
2013/07/09 Javascript
Javascript 学习笔记之 对象篇(二) : 原型对象
2014/06/24 Javascript
在JavaScript中操作数组之map()方法的使用
2015/06/09 Javascript
jQuery插件实现适用于移动端的地址选择器
2016/02/18 Javascript
浅谈angular4实际项目搭建总结
2017/12/01 Javascript
在Vue项目中使用snapshot测试的具体使用
2019/04/16 Javascript
layui.use模块外部使用其内部定义的js封装函数方法
2019/09/16 Javascript
前端深入理解Typescript泛型概念
2020/03/09 Javascript
用VsCode编辑TypeScript的实现方法
2020/05/07 Javascript
解决vue项目中出现Invalid Host header的问题
2020/11/17 Javascript
给Python初学者的一些编程技巧
2015/04/03 Python
Python简单实现自动删除目录下空文件夹的方法
2017/08/29 Python
python中使用PIL制作并验证图片验证码
2018/03/15 Python
python tkinter图形界面代码统计工具
2019/09/18 Python
用什么库写 Python 命令行程序(示例代码详解)
2020/02/20 Python
在python image 中实现安装中文字体
2020/05/16 Python
Python图像处理之膨胀与腐蚀的操作
2021/02/07 Python
HTML5使用drawImage()方法绘制图像
2014/06/23 HTML / CSS
Koral官方网站:女性时尚运动服
2019/04/10 全球购物
Dogeared官网:在美国手工制作的珠宝
2019/08/24 全球购物
求两个数的乘积和商数,该作用由宏定义来实现
2013/03/13 面试题
网络工程师个人的自我评价范文
2013/10/01 职场文书
上班离岗检讨书
2014/01/27 职场文书
群众路线教育实践活动学习笔记内容
2014/11/06 职场文书
《金色的草地》教学反思
2016/02/17 职场文书
mysql下的max_allowed_packet参数设置详解
2022/02/12 MySQL
Redis 异步机制
2022/05/15 Redis