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+iframe形成页面的一种遮罩效果的具体实现
Dec 31 Javascript
Mac OS X 系统下安装和部署Egret引擎开发环境
Sep 03 Javascript
jQuery实现感应鼠标动画效果自动伸长的输入框实例
Feb 24 Javascript
JavaScript计算器网页版实现代码分享
Jul 15 Javascript
js本地图片预览实现代码
Oct 09 Javascript
微信小程序  Mustache语法详细介绍
Oct 27 Javascript
AngularJS入门教程之过滤器用法示例
Nov 02 Javascript
Javascript之面向对象--方法
Dec 02 Javascript
vue 打包后的文件部署到express服务器上的方法
Aug 09 Javascript
jQuery选择器之属性筛选选择器用法详解
Sep 19 jQuery
详解JavaScript 的变量
Mar 08 Javascript
elementUI table表格动态合并的示例代码
May 15 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使用json_encode对变量json编码
2014/04/07 PHP
php+xml编程之SimpleXML的应用实例
2015/01/24 PHP
php源码分析之DZX1.5随机数函数random用法
2015/06/17 PHP
$()JS小技巧
2007/07/21 Javascript
JavaScript执行效率与性能提升方案
2012/12/21 Javascript
JQuery判断radio是否选中并获取选中值的示例代码
2014/10/17 Javascript
javascript实现链接单选效果的方法
2015/05/13 Javascript
jQuery实现的图文高亮滚动切换特效实例
2015/08/10 Javascript
jQuery实现textarea自动增长宽高的方法
2015/12/18 Javascript
javascript每日必学之条件分支
2016/02/17 Javascript
在AngularJS中使用jQuery的zTree插件的方法
2016/04/21 Javascript
浅谈js和css内联外联注意事项
2016/06/30 Javascript
JavaScript实现星星等级评价功能
2017/03/22 Javascript
JS简单验证上传文件类型的方法
2017/04/17 Javascript
jQuery选择器之子元素选择器详解
2017/09/18 jQuery
JavaScript实现快速排序的方法分析
2018/01/10 Javascript
微信小程序中使用ECharts 异步加载数据的方法
2018/06/27 Javascript
vue项目中实现的微信分享功能示例
2019/01/21 Javascript
javascript的delete运算符知识点总结
2019/11/19 Javascript
Vue实现点击箭头上下移动效果
2020/06/11 Javascript
浅析python递归函数和河内塔问题
2017/04/18 Python
Python中的heapq模块源码详析
2019/01/08 Python
浅谈Django2.0 加xadmin踩的坑
2019/11/15 Python
Python用5行代码实现批量抠图的示例代码
2020/04/14 Python
Python 通过爬虫实现GitHub网页的模拟登录的示例代码
2020/08/17 Python
英国儿童图书网站:Scholastic
2017/03/26 全球购物
Moss Bros官网:英国排名第一的西装店
2020/02/26 全球购物
行政助理的职责
2013/11/14 职场文书
高中毕业自我鉴定
2013/12/16 职场文书
机械设计及其自动化求职推荐信
2014/02/17 职场文书
保护水资源的标语
2014/06/17 职场文书
浪漫婚礼主题活动策划方案
2014/09/15 职场文书
2014年社区综治工作总结
2014/11/17 职场文书
遗失说明具结保证书
2015/02/26 职场文书
关于golang高并发的实现与注意事项说明
2021/05/08 Golang
Python实现批量将文件复制到新的目录中再修改名称
2022/04/12 Python