zoukankan      html  css  js  c++  java
  • 窗口加载蒙板,内嵌网页

    用于在现有窗口上加载蒙板,在蒙板内在嵌入其他页面内容

    //初始化导航背景,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);

  • 相关阅读:
    Chrome Extension 扩展程序 小白入门
    gulp 打包报错:ReferenceError: internalBinding is not defined
    error in static/js/xxx.js from UglifyJs Unpected token: punc() [static/js/xxx.js]
    ES6-
    浏览器的渲染原理(转载)
    nodeType、nodeName和nodeValue
    浏览器 HTTP 协议缓存机制详解
    JS函数的上下文环境
    ready和onload的区别
    自定义事件
  • 原文地址:https://www.cnblogs.com/vnii/p/1880234.html
Copyright © 2011-2022 走看看