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和Asp、Php等后端程序间传值编码统一
Apr 17 Javascript
jquery.cvtooltip.js 基于jquery的气泡提示插件
Nov 19 Javascript
JS实现从顶部下拉显示的带动画QQ客服特效代码
Oct 24 Javascript
javascript验证香港身份证的格式或真实性
Feb 07 Javascript
深入理解JavaScript 参数按值传递
May 24 Javascript
Bootstrap Table 删除和批量删除
Sep 22 Javascript
React Native 真机断点调试+跨域资源加载出错问题的解决方法
Jan 18 Javascript
webpack3里使用uglifyjs压缩js时打包报错的解决
Dec 13 Javascript
优化Vue项目编译文件大小的方法步骤
May 27 Javascript
jquery操作checkbox的常用方法总结【附测试源码下载】
Jun 10 jQuery
vue tab切换,解决echartst图表宽度只有100px的问题
Jul 19 Javascript
ant-design-vue中的select选择器,对输入值的进行筛选操作
Oct 24 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 字符截取 解决中文的截取问题,不用mb系列
2009/09/29 PHP
PHP函数strip_tags的一个bug浅析
2014/05/22 PHP
CodeIgniter输出中文乱码的两种解决办法
2014/06/12 PHP
php5.4传引用时报错问题分析
2016/01/22 PHP
ThinkPHP路由机制简介
2016/03/23 PHP
PHP Trait代码复用类与多继承实现方法详解
2019/06/17 PHP
javascript读取xml
2006/11/04 Javascript
自己的js工具 Cookie 封装
2009/08/21 Javascript
javascrip客户端验证文件大小及文件类型并重置上传
2011/01/12 Javascript
javascript 获取网页标题代码实例
2014/01/22 Javascript
ie8模式下click无反应点击option无反应的解决方法
2014/10/11 Javascript
jquery实现键盘左右翻页特效
2015/04/30 Javascript
jquery插件EasyUI中form表单提交实例分享
2016/01/11 Javascript
jQuery获取字符串中出现最多的数
2016/02/22 Javascript
基于Jquery插件Uploadify实现实时显示进度条上传图片
2020/03/26 Javascript
jQuery中text() val()和html()的区别实例详解
2016/06/28 Javascript
js前端解决跨域问题的8种方案(最新最全)
2016/11/18 Javascript
Angular企业级开发——MVC之控制器详解
2017/02/20 Javascript
jQuery实现模拟搜索引擎的智能提示功能简单示例
2019/01/27 jQuery
vue 使用饿了么UI仿写teambition的筛选功能
2021/03/01 Vue.js
Python简单生成8位随机密码的方法
2017/05/24 Python
基于python实现在excel中读取与生成随机数写入excel中
2018/01/04 Python
对pandas将dataframe中某列按照条件赋值的实例讲解
2018/11/29 Python
Python实现bilibili时间长度查询的示例代码
2020/01/14 Python
html5使用Drag事件编辑器拖拽上传图片的示例代码
2017/08/22 HTML / CSS
台湾最大网路书店:博客来
2018/03/18 全球购物
HolidayLettings英国:预订最好的度假公寓、别墅和自助式住宿
2019/08/27 全球购物
.NET面试题:什么是反射
2016/09/30 面试题
2014年幼儿园植树节活动方案
2014/03/02 职场文书
化学专业大学生职业生涯规划范文
2014/09/13 职场文书
2014财务人员自我评价范文
2014/09/21 职场文书
公司年会开场白
2015/06/01 职场文书
2021-4-5课程——SQL Server查询【3】
2021/04/05 SQL Server
CSS3 制作精美的定价表
2021/04/06 HTML / CSS
利用python调用摄像头的实例分析
2021/06/07 Python
openGauss数据库JDBC环境连接配置的详细过程(Eclipse)
2022/06/01 Java/Android