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无缝滚动代码
Jan 03 Javascript
原生javascript图片自动或手动切换示例附演示源码
Sep 04 Javascript
javascript贪吃蛇完整版(源码)
Dec 09 Javascript
jQuery过滤选择器:not()方法使用介绍
Apr 20 Javascript
js实现C#的StringBuilder效果完整实例
Dec 22 Javascript
实例详解jQuery Mockjax 插件模拟 Ajax 请求
Jan 12 Javascript
jQuery ajaxForm()的应用
Oct 14 Javascript
js原生实现移动端手指滑动轮播图效果的示例
Jan 02 Javascript
说说如何使用Vuex进行状态管理(小结)
Apr 14 Javascript
layer实现弹出层自动调节位置
Sep 05 Javascript
解决layui的radio属性或别的属性没显示出来的问题
Sep 26 Javascript
node.js中fs文件系统模块的使用方法实例详解
Feb 13 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 curl模拟post请求小实例
2013/11/13 PHP
百度地图API应用之获取用户的具体位置
2014/06/10 PHP
PHP回溯法解决0-1背包问题实例分析
2015/03/23 PHP
10个php函数实用却不常见
2015/10/13 PHP
js 获取Listbox选择的值的代码
2010/04/15 Javascript
jquery时间下拉框小例子
2013/04/15 Javascript
javascript常用对话框小集
2013/09/13 Javascript
jquery如何判断某元素是否具备指定的样式
2013/11/05 Javascript
js中文逗号转英文实现
2014/02/11 Javascript
jQuery自定义数值抽奖活动代码
2016/06/11 Javascript
jquery横向纵向鼠标滚轮全屏切换
2017/02/27 Javascript
vue2.0中goods选购栏滚动算法的实现代码
2017/05/17 Javascript
基于VUE选择上传图片并页面显示(图片可删除)
2017/05/25 Javascript
jQuery选择器_动力节点Java学院整理
2017/07/05 jQuery
详解用node搭建简单的静态资源管理器
2017/08/09 Javascript
原生JS实现的雪花飘落动画效果
2018/05/03 Javascript
解决layui 复选框等内置控件不显示的问题
2018/08/14 Javascript
Vue+Element UI+Lumen实现通用表格分页功能
2019/02/02 Javascript
利用Angular7开发一个Radio组件的全过程
2019/07/11 Javascript
JS回调函数深入理解
2019/10/16 Javascript
浅析vue cli3 封装Svgicon组件正确姿势(推荐)
2020/04/27 Javascript
小程序实现点击tab切换左右滑动
2020/11/16 Javascript
python之wxPython菜单使用详解
2014/09/28 Python
Python获取Windows或Linux主机名称通用函数分享
2014/11/22 Python
python中的随机函数小结
2018/01/27 Python
ubuntu安装sublime3并配置python3环境的方法
2018/03/15 Python
20行python代码的入门级小游戏的详解
2019/05/05 Python
python面向对象 反射原理解析
2019/08/12 Python
微信html5页面调用第三方位置导航的示例
2018/03/14 HTML / CSS
美国领先的精品家居照明和装饰产品在线零售商:LightsOnline.com
2018/01/23 全球购物
Lentiamo荷兰:在线订购隐形眼镜、隐形眼镜液和太阳镜
2019/10/25 全球购物
Chemist Warehouse中文网:澳洲连锁大药房
2021/02/05 全球购物
上海方立数码笔试题
2013/10/18 面试题
SQL Server笔试题
2012/01/10 面试题
查摆问题整改措施范文
2014/10/11 职场文书
Nginx文件已经存在全局反向代理问题排查记录
2022/07/15 Servers