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

你可能感兴趣的文章
PKUWC2018 5/6
查看>>
As-If-Serial 理解
查看>>
MYSQL SHOW VARIABLES简介
查看>>
雷林鹏分享:Redis 简介
查看>>
自卑都是自己不踏实做事的表现
查看>>
C# 网页自动填表自动登录 .
查看>>
netfilter 和 iptables
查看>>
洛谷P1005 矩阵取数游戏
查看>>
Django ORM操作
查看>>
2012年最佳30款免费 WordPress 主题
查看>>
在Silverlight中使用HierarchicalDataTemplate为TreeView实现递归树状结构
查看>>
HDU-1150 Machine Schedule 二分图匹配
查看>>
单例模式的5种写法
查看>>
安卓问题报告小记(四):Some projects cannot be imported because they already exist in the workspace...
查看>>
显示地图
查看>>
无线通信基础(一):无线网络演进
查看>>
如何在工作中快速成长?阿里资深架构师给工程师的10个简单技巧
查看>>
WebSocket 时时双向数据,前后端(聊天室)
查看>>
关于cocoa 运行时runtime
查看>>
关于python中带下划线的变量和函数 的意义
查看>>