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 相关文章推荐
Add a Table to a Word Document
Jun 15 Javascript
JQUERY dialog的用法详细解析
Dec 19 Javascript
Javascript四舍五入Math.round()与Math.pow()使用介绍
Dec 27 Javascript
Javascript window对象详解
Nov 12 Javascript
jQuery基于扩展实现的倒计时效果
May 14 Javascript
jQuery实现table中两列CheckBox只能选中一个的示例
Sep 22 jQuery
一步步教你利用webpack如何搭一个vue脚手架(超详细讲解和注释)
Jan 08 Javascript
JS获取input[file]的值并显示在页面的实现方法
Mar 09 Javascript
javascript+css实现进度条效果
Mar 25 Javascript
JS实现躲避粒子小游戏
Jun 18 Javascript
详解vue v-model
Aug 31 Javascript
vue使用require.context实现动态注册路由
Dec 25 Vue.js
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微信公众号开发(3)php实现简单微信文本通讯
2016/12/15 PHP
使用js在页面中绘制表格核心代码
2013/09/16 Javascript
21个值得收藏的Javascript技巧
2014/02/04 Javascript
一个jquery实现的不错的多行文字图片滚动效果
2014/09/28 Javascript
浅谈jQuery中height与width
2015/07/06 Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记6)
2015/12/20 Javascript
NodeJS中的MongoDB快速入门详细教程
2016/11/11 NodeJs
微信小程序 ecshop地址三级联动实现实例代码
2017/02/28 Javascript
JavaScript 用fetch 实现异步下载文件功能
2017/07/21 Javascript
关于Vue.nextTick()的正确使用方法浅析
2017/08/25 Javascript
javascript帧动画(实例讲解)
2017/09/02 Javascript
three.js中文文档学习之创建场景
2017/11/20 Javascript
vue-cli启动本地服务局域网不能访问的原因分析
2018/01/22 Javascript
浅谈Vue-cli单文件组件引入less,sass,css样式的不同方法
2018/03/13 Javascript
jquery拖拽自动排序插件使用方法详解
2020/07/20 jQuery
windows实现npm和cnpm安装步骤
2019/10/24 Javascript
详解Vue后台管理系统开发日常总结(组件PageHeader)
2019/11/01 Javascript
vue 实现基础组件的自动化全局注册
2020/12/25 Vue.js
浅析Python中的join()方法的使用
2015/05/19 Python
python列表生成式与列表生成器的使用
2018/02/23 Python
python 将数据保存为excel的xls格式(实例讲解)
2018/05/03 Python
wxPython的安装与使用教程
2018/08/31 Python
python组合无重复三位数的实例
2018/11/13 Python
Python 列表去重去除空字符的例子
2019/07/20 Python
python判断无向图环是否存在的示例
2019/11/22 Python
Python StringIO如何在内存中读写str
2020/01/07 Python
python实现视频压缩功能
2020/12/18 Python
HTML5移动开发图片压缩上传功能
2016/11/09 HTML / CSS
应聘护士自荐信
2013/10/21 职场文书
园林技术个人的自我评价
2014/01/08 职场文书
银行员工辞职信范文
2014/01/20 职场文书
工程招投标邀请书
2014/01/26 职场文书
2014政务公开实施方案
2014/02/19 职场文书
个人贷款担保书
2014/04/01 职场文书
小学英语复习计划
2015/01/19 职场文书
Python绘画好看的星空图
2022/03/17 Python