博客
关于我
强烈建议你试试无所不能的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

你可能感兴趣的文章
观察者模式(Observer)
查看>>
python中numpy.r_和numpy.c_
查看>>
egret3D与2D混合开发,画布尺寸不一致的问题
查看>>
freebsd 实现 tab 命令 补全 命令 提示
查看>>
struts1和struts2的区别
查看>>
函数之匿名函数
查看>>
shell习题第16题:查用户
查看>>
Redis常用命令
查看>>
2018.11.06 bzoj1040: [ZJOI2008]骑士(树形dp)
查看>>
2019.02.15 bzoj5210: 最大连通子块和(链分治+ddp)
查看>>
redis cluster 集群资料
查看>>
微软职位内部推荐-Sr. SE - Office incubation
查看>>
微软职位内部推荐-SOFTWARE ENGINEER II
查看>>
centos系统python2.7更新到3.5
查看>>
C#类与结构体究竟谁快——各种函数调用模式速度评测
查看>>
我到底要选择一种什么样的生活方式,度过这一辈子呢:人生自由与职业发展方向(下)...
查看>>
poj 题目分类
查看>>
windows 安装yaml支持和pytest支持等
查看>>
读书笔记:季羡林关于如何做研究学问的心得
查看>>
面向对象的优点
查看>>