javascript 窗口加载蒙板 内嵌网页内容

 更新时间:2010年11月19日 20:11:07   作者:  
用于在现有窗口上加载蒙板,在蒙板内在嵌入其他页面内容
复制代码 代码如下:

//初始化导航背景,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执行上下文、变量对象实例分析

    这篇文章主要介绍了javascript执行上下文、变量对象,结合实例形式分析了javascript执行上下文、变量对象相关概念、原理、用法与操作注意事项,需要的朋友可以参考下
    2020-04-04
  • javascript结合Cookies实现浏览记录历史

    javascript结合Cookies实现浏览记录历史

    最近在工作当中遇到一个问题 有个页面需要添加一个浏览历史记录功能,具体来说就是要记录下用户在此网站的点击历史 并把它们降序排列出来(只显示前6个浏览历史而且不能重复)。
    2008-09-09
  • javascript图像处理—仿射变换深度理解

    javascript图像处理—仿射变换深度理解

    上一篇文章,我们讲解了图像金字塔,这篇文章我们来了解仿射变换,仿射?任何仿射变换都可以转换成,乘以一个矩阵(线性变化),再加上一个向量(平移变化),接下来详细介绍,感兴趣的朋友可以了解下
    2013-01-01
  • JavaScript中valueOf函数与toString方法深入理解

    JavaScript中valueOf函数与toString方法深入理解

    基本上,所有JS数据类型都拥有valueOf和toString这两个方法,null除外。它们俩解决javascript值运算与显示的问题,本文将详细介绍,有需要的朋友可以参考下
    2012-12-12
  • iframe子页面与父页面在同域或不同域下的js通信

    iframe子页面与父页面在同域或不同域下的js通信

    根据iframe中src属性是同域链接还是跨域链接,通信方式也不同,下面有个不错的示例,需要的朋友可以参考下
    2014-05-05
  • TypeScript安装与使用的详细教程

    TypeScript安装与使用的详细教程

    TypeScript是JavaScript的超集,扩展了JavaScript的语法,因此现有的JavaScript代码可与TypeScript一起工作无需任何修改,TypeScript通过类型注解提供编译时的静态类型检查,下面这篇文章主要给大家介绍了关于TypeScript安装与使用的详细教程,需要的朋友可以参考下
    2023-01-01
  • JavaScript定时器类型总结

    JavaScript定时器类型总结

    这篇文章主要分享了JavaScript定时器类型总结,文章围绕JavaScript定时器类型的相关资料展开全文详细内容,需要的小伙伴可以参考一下,希望对你有所帮助
    2021-12-12
  • 谈谈我对JavaScript原型和闭包系列理解(随手笔记8)

    谈谈我对JavaScript原型和闭包系列理解(随手笔记8)

    这篇文章主要介绍了谈谈我对JavaScript原型和闭包系列理解(随手笔记8)的相关资料,需要的朋友可以参考下
    2015-12-12
  • 简单实现Bootstrap标签页

    简单实现Bootstrap标签页

    这篇文章主要教大家简单实现Bootstrap标签页,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-12-12
  • 本地对象Array的原型扩展实现代码

    本地对象Array的原型扩展实现代码

    该扩展方法目的为删除数组中的重复项,并返回一个包含所有重复条目的新数组;
    2010-12-12

最新评论