博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Javascript和CSS模拟模态窗口
阅读量:5328 次
发布时间:2019-06-14

本文共 1328 字,大约阅读时间需要 4 分钟。

 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

你可能感兴趣的文章
深度学习文献阅读笔记(6)
查看>>
Android轻量级的开源缓存框架ASimpleCache
查看>>
让页面上图片不变形
查看>>
pyspider--post
查看>>
他山之石:加载图片的一个小问题
查看>>
设计模式讲解2:static proxy和decorator的不同点
查看>>
IOS 多个UIImageView 加载高清大图时内存管理
查看>>
shell - 常识
查看>>
[PHP] excel 的导入导出
查看>>
圆角进度条,带数字居中显示的圆角进度条
查看>>
docker-containerd 启动流程分析
查看>>
SDL(01-10)
查看>>
HDFS v1.0学习笔记
查看>>
2017马上过去了
查看>>
03: 通讯录管理
查看>>
Kettle数据源连接配置
查看>>
[na]pc加入域认证细节
查看>>
Harris角点检测原理分析
查看>>
【学习笔记】bootstrap之CSS组件
查看>>
Unity3d之Hash&Slash学习笔记(一)--角色属性类的构架
查看>>