Javascript和CSS模拟模态窗口

CSS与JS实现动态DIV显示隐藏

weixin_30871905

于 2019-08-09 22:25:34 发布

阅读量210

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/leodrain/archive/2007/10/31/944872.html

本文介绍如何使用CSS和JavaScript来控制网页上DIV元素的动态显示与隐藏，通过修改样式属性实现交互效果，包括调整高度、宽度及设置显示状态。

CSS代码：

#containerDiv{

}{

width:100%;

height:100%;

background-color:#E6E6E6;

filter : progid:DXImageTransform.Microsoft.Alpha(startX=0, startY=0, finishX=100, finishY=100,style=1,opacity=25,finishOpacity=25);

position:absolute;

top:0;

left:0;

z-index:49;

display:none;

}

#floatDiv{

}{

top:200px;

position:absolute;

z-index:50;

width:100px;

display:none;

border:3px solid #E5E5E5;

left:100px;

background-color:#e6e6e6;

}

Javascript代码：

1 function show(){
2
3 var container=document.getElementById("containerDiv")
4 var floatDiv=document.getElementById("floatDiv");
5 container.style.height=650+"px";
6 container.style.width=window.screen.width+"px";
7 container.style.display='block';
8 floatDiv.style.display='block';
9 }
10 function hide(){
11
12 var container=document.getElementById("containerDiv")
13 var floatDiv=document.getElementById("floatDiv");
14 container.style.display='none';
15 floatDiv.style.display='none';
16 }

HTML标签：

<div id="floatDiv">
在这个DIV里可以放一些元素
<br/><input name="Button1" type="button" value="button" onclick="hide()"/>
</div>
<div id="containerDiv"> </div>

<form method="post">
<input name="Button2" type="button" value="button" onclick="show()"/>
</form>

转载于:https://www.cnblogs.com/leodrain/archive/2007/10/31/944872.html