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

你可能感兴趣的文章
无线通信基础(一):无线网络演进
查看>>
如何在工作中快速成长?阿里资深架构师给工程师的10个简单技巧
查看>>
WebSocket 时时双向数据,前后端(聊天室)
查看>>
关于cocoa 运行时runtime
查看>>
关于python中带下划线的变量和函数 的意义
查看>>
asp.net 写入excel时,不能更新。数据库或对象为只读。
查看>>
linux清空日志文件内容 (转)
查看>>
jsp中对jstl一些标签的引用方式
查看>>
安卓第十三天笔记-服务(Service)
查看>>
css3学习笔记之背景
查看>>
Servlet接收JSP参数乱码问题解决办法
查看>>
【bzoj5016】[Snoi2017]一个简单的询问 莫队算法
查看>>
[dpdk] 熟悉SDK与初步使用 (二)(skeleton源码分析)
查看>>
Ajax : load()
查看>>
分布式版本控制系统
查看>>
MySQL-EXPLAIN执行计划Extra解释
查看>>
Zookeeper概述
查看>>
Zookeeper一致性级别
查看>>
分布式系统的一致性级别划分及Zookeeper一致性级别分析
查看>>
单例模式的几种实现方式及对比
查看>>