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实现在页面加载完毕后获取图片高度或宽度
Jun 16 Javascript
javascript中的__defineGetter__和__defineSetter__介绍
Aug 15 Javascript
jquery中append()与appendto()用法分析
Nov 14 Javascript
Javascript的表单验证-提交表单
Mar 18 Javascript
jQuery事件绑定on()与弹窗实现代码
Apr 28 Javascript
基于JavaScript实现移动端无限加载分页
Mar 27 Javascript
Node.js 使用jade模板引擎的示例
May 11 Javascript
微信小程序+腾讯地图开发实现路径规划绘制
May 22 Javascript
微信小程序网络请求实现过程解析
Nov 06 Javascript
原生js实现随机点餐效果
Dec 10 Javascript
如何在vue项目中嵌入jsp页面的方法(2种)
Feb 06 Javascript
解决Vue使用bus总线时,第一次路由跳转时数据没成功传递问题
Jul 28 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
桌面中心(二)数据库写入
2006/10/09 PHP
php数据结构之顺序链表与链式线性表示例
2018/01/22 PHP
P3P Header解决Cookie跨域的问题
2013/03/12 Javascript
随鼠标上下滚动的jquery代码
2013/12/05 Javascript
javascript制作loading动画效果 loading效果
2014/01/14 Javascript
node.js中的fs.closeSync方法使用说明
2014/12/17 Javascript
javascript显示中文日期的方法
2015/06/18 Javascript
js实现的在线调色板功能完整实例
2016/12/21 Javascript
使用DeviceOne实现微信小程序功能
2016/12/29 Javascript
详解JavaScript中js对象与JSON格式字符串的相互转换
2017/02/14 Javascript
基于vue实现分页/翻页组件paginator示例
2017/03/09 Javascript
Vue引用第三方datepicker插件无法监听datepicker输入框的值的解决
2018/01/27 Javascript
JS/HTML5游戏常用算法之碰撞检测 像素检测算法实例详解
2018/12/12 Javascript
js实现网页同时进行多个倒计时功能
2019/02/25 Javascript
使用jQuery如何写一个含验证码的登录界面
2019/05/13 jQuery
你或许不知道的一些npm实用技巧
2019/07/04 Javascript
使用 node.js 模仿 Apache 小部分功能
2019/07/07 Javascript
微信小程序实现购物车代码实例详解
2019/08/29 Javascript
javascript canvas实现简易时钟例子
2020/09/05 Javascript
Python读取YUV文件,并显示的方法
2018/12/04 Python
python自动发送测试报告邮件功能的实现
2019/01/22 Python
学习Python爬虫的几点建议
2020/08/05 Python
Manjaro、pip、conda更换国内源的方法
2020/11/17 Python
浏览器实现移动端高性能css3动画(开启gpu加速)
2013/12/23 HTML / CSS
Under Armour安德玛法国官网:美国高端运动科技品牌
2018/06/29 全球购物
Chicco婴儿用品美国官网:汽车座椅、婴儿推车、高脚椅等
2018/11/05 全球购物
如何拷贝一整个Java对象,包括它的状态
2013/12/27 面试题
高中历史教学反思
2014/02/08 职场文书
物业经理自我鉴定
2014/03/03 职场文书
初中军训感想300字
2014/03/05 职场文书
社区党务公开实施方案
2014/03/18 职场文书
公职人员索取回扣检举信
2014/04/04 职场文书
英语教育专业自荐信
2014/05/29 职场文书
股指期货心得体会
2014/09/13 职场文书
MySQL CHAR和VARCHAR该如何选择
2021/05/31 MySQL
Python 统计序列中元素的出现频度
2022/04/26 Python