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);

相关文章

  • 获取div编辑框,textarea,input text的光标位置 兼容IE,FF和Chrome的方法介绍

    获取div编辑框,textarea,input text的光标位置 兼容IE,FF和Chrome的方法介绍

    获取div编辑框,textarea,input text的光标位置 兼容IE,FF和Chrome的方法介绍,有需求的朋友可以参考
    2012-11-11
  • JS实现支持Ajax验证的表单插件

    JS实现支持Ajax验证的表单插件

    这篇文章主要为大家详细介绍了JS实现支持Ajax验证的表单插件,感兴趣的小伙伴们可以参考一下
    2016-03-03
  • JavaScript实现时间倒计时跳转(推荐)

    JavaScript实现时间倒计时跳转(推荐)

    这篇文章主要介绍了JavaScript实现时间倒计时跳转(推荐)的相关资料,涉及到settimeout和setinterval方法的介绍,非常不错具有参考借鉴价值,需要的朋友可以参考下
    2016-06-06
  • js调试工具 Javascript Debug Toolkit 2.0.0版本发布

    js调试工具 Javascript Debug Toolkit 2.0.0版本发布

    Javascript Debug Toolkit是一个可以跨浏览器调试javascript的开源项目,支持在IE,FIREFOX,SAFARI,CHROME等浏览器中调试javascript。2.0.0版本做了较大变动,增加以下功能
    2008-12-12
  • javascript实现的柱状统计图表

    javascript实现的柱状统计图表

    下面是完成后的预览图,可以看到,绘制一个表格,耗时0.005毫秒,也就是200分之一秒。效率我还是比较满意的!
    2010-07-07
  • Web开发必知Javascript技巧大全

    Web开发必知Javascript技巧大全

     JavaScript是一个绝冠全球的编程语言,可用于Web开发、移动应用开发(PhoneGap、Appcelerator)、服务器端开发(Node.js和Wakanda)等等,通过本文给大家介绍Web开发必知Javascript技巧大全,需要的朋友参考下吧
    2016-02-02
  • JS抛物线动画实例制作

    JS抛物线动画实例制作

    本篇文章给大家详细分析了JS抛物线动画制作过程以及相关的代码实例分享,有兴趣的朋友参考下。
    2018-02-02
  • javascript实现显示和隐藏div方法汇总

    javascript实现显示和隐藏div方法汇总

    本文章通过几个简单的实例告诉你如何来实例关于隐藏与显示div层及关闭层与隐藏的区别分析哦,有需要的同学可以参考一下本文章。
    2015-08-08
  • JS实现霓虹灯文字效果的方法

    JS实现霓虹灯文字效果的方法

    这篇文章主要介绍了JS实现霓虹灯文字效果的方法,涉及javascript遍历字符串及页面样式的动态操作技巧,效果非常炫目华丽,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-08-08
  • 微信小程序长按识别二维码的几种情况分析

    微信小程序长按识别二维码的几种情况分析

    最近接到需求,在小程序内部长按识别二维码添加个人微信,下面这篇文章主要给大家分析介绍了关于微信小程序长按识别二维码的几种情况,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-08-08

最新评论