div+css+javascript 实现模式化窗口

最新推荐文章于 2022-05-27 11:45:11 发布

leiyunkang7

最新推荐文章于 2022-05-27 11:45:11 发布

阅读量1.4k

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/sinat_14857011/article/details/41548827

版权

javascript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

今天项目中要实现一个模式化窗口，虽然easyUi有这个控件，但是只为了一个模式化窗口效果还不至于引入整个easyUi库，否则那样就太浪费资源了。

于是乎在网上找到了一位大神的代码，原文出处我找不到了，在这里感谢一声。

不啰嗦，代码如下：

        // 显示窗口
	var showDetails=function(){
		
	// 显示遮盖的层
        var objDeck = document.getElementById("deck");
        if(!objDeck)
        {
            objDeck = document.createElement("div");
            objDeck.id="deck";
            document.body.appendChild(objDeck);
        }
        objDeck.className="showDeck";
        objDeck.style.filter="alpha(opacity=50)";
        objDeck.style.opacity=50/100;
        objDeck.style.MozOpacity=50/100;
        $(objDeck).css("height",$("html").height());
        // 显示遮盖的层end
        
      // 改变样式
        document.getElementById('divBox').className='showDlg';
        
      // 调整位置至居中
        adjustLocation();
	};
	
	// 关闭详情窗口
	var closeDetails=function(){
		document.getElementById('divBox').className='hideDlg';
        <span style="white-space:pre">	</span>document.getElementById("deck").className="hideDeck";
	};
	
	// 使窗口居中
	adjustLocation=function()
    {
        var obox=document.getElementById('divBox');
        if (obox !=null && obox.style.display !="none")
        {
            var w=600;
            var h=500;
            var oLeft,oTop;
            
            if (parent.window.innerWidth)
            {
                oLeft=parent.window.pageXOffset+(parent.window.innerWidth-w)/2 +"px";
                oTop=parent.window.pageYOffset+(parent.window.innerHeight-h)/2 +"px";
            }
            else
            {
                var dde=document.documentElement;
                oLeft=dde.scrollLeft+(dde.offsetWidth-w)/2 +"px";
                oTop=dde.scrollTop+(dde.offsetHeight-h)/2 +"px";
            }
            
            obox.style.left=oLeft;
            obox.style.top=oTop;
        }
    };

.hideDlg {
	display: none;
}

.showDlg {
	background-color: rgb(225,225,201);
	padding: 20px;
	border:0px;
	height: 500px;
	width: 700px;
	position: absolute;
	display: block;
	z-index: 50;
}

.showDeck {
	display: block;
	top: 0px;
	left: 0px;
	margin: 0px;
	padding: 0px;
	width: 100%;
	height: 100%;
	position: absolute;
	z-index: 30;
	background: black;
}

.hideDeck {
	display: none;
}

<div id="divBox" class="hideDlg"></div>

ps：javascript代码第16行我用了JQuery修改了覆盖层的高度，（为什么用JQuery？：因为用原生的 objDeck.style.height=document.getelementbytagname('html')[0].style.height 没起作用，原因我还没去查，so 先用JQuery顶着，嘿嘿~）

以后有时间封装成一个js插件。

以上

2014年11月29日修改：javascript第16的代码，$("html").height() 分别在ie浏览器下和在firefox浏览器下获取到的高度不一致，so ，$("html").height() 是不兼容的代码，换成$(window).height() 即可。