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 相关文章推荐
Javascript 设计模式(二) 闭包
May 26 Javascript
firefox浏览器不支持innerText的解决方法
Aug 07 Javascript
jQuery简单实现图片预加载
Apr 20 Javascript
jQuery实现定时读取分析xml文件的方法
Jul 16 Javascript
jquery实现邮箱自动填充提示功能
Nov 17 Javascript
全面解析Bootstrap手风琴效果
Apr 17 Javascript
分享两款带遮罩的jQuery弹出框
Dec 30 Javascript
Ionic如何实现下拉刷新与上拉加载功能
Jun 03 Javascript
Bootstrap响应式侧边栏改进版
Sep 17 Javascript
微信小程序教程系列之视图层的条件渲染(10)
Apr 19 Javascript
Vue实现固定定位图标滑动隐藏效果
May 30 Javascript
如何利用js在两个html窗口间通信
Apr 27 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
经典的星际争霸,满是回忆的BGM
2020/04/09 星际争霸
PHP 引用文件技巧
2010/03/02 PHP
基于php上传图片重命名的6种解决方法的详细介绍
2013/04/28 PHP
浅谈Eclipse PDT调试PHP程序
2014/06/09 PHP
帝国CMS留言板回复后发送EMAIL通知客户
2015/07/06 PHP
php实现无限级分类(递归方法)
2015/08/06 PHP
thinkPHP5框架路由常用知识点汇总
2019/09/15 PHP
jQuery EasyUI API 中文文档 - Tree树使用介绍
2011/11/19 Javascript
浅析javascript中函数声明和函数表达式的区别
2015/02/15 Javascript
jQuery+AJAX实现网页无刷新上传
2015/02/22 Javascript
JS中Location使用详解
2015/05/12 Javascript
jquery表单对象属性过滤选择器实例分析
2015/05/18 Javascript
JavaScript中操作字符串之localeCompare()方法的使用
2015/06/06 Javascript
bootstrap输入框组代码分享
2016/06/07 Javascript
nodejs 最新版安装npm 的使用详解
2018/01/18 NodeJs
react native 文字轮播的实现示例
2018/07/27 Javascript
学习jQuery中的noConflict()用法
2018/09/28 jQuery
Puppeteer 爬取动态生成的网页实战
2018/11/14 Javascript
JavaScript Math对象和调试程序的方法分析
2019/05/13 Javascript
详解vue中的父子传值双向绑定及数据更新问题
2019/06/13 Javascript
小程序实现多个选项卡切换
2020/06/19 Javascript
vue render函数动态加载img的src路径操作
2020/10/26 Javascript
echarts柱状图背景重叠组合而非并列的实现代码
2020/12/10 Javascript
[02:56]DOTA2英雄基础教程 巨魔战将
2013/12/10 DOTA
使用基于Python的Tornado框架的HTTP客户端的教程
2015/04/24 Python
python3之微信文章爬虫实例讲解
2017/07/12 Python
Python3学习urllib的使用方法示例
2017/11/29 Python
Python决策树和随机森林算法实例详解
2018/01/30 Python
python 返回列表中某个值的索引方法
2018/11/07 Python
Python使用py2neo操作图数据库neo4j的方法详解
2020/01/13 Python
ONLY瑞典官网:世界知名服装品牌
2018/06/19 全球购物
环保建议书600字
2014/05/14 职场文书
婚庆司仪开场白
2015/05/29 职场文书
学雷锋主题班会教案
2015/08/13 职场文书
奖学金发言稿(范文)
2019/08/21 职场文书
抖音短视频(douyin)去水印工具的实现代码
2021/03/30 Javascript