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

你可能感兴趣的文章
C# 在word中查找及替换文本
查看>>
HTTP与HTTPS的区别
查看>>
MySQL-EXPLAIN执行计划Extra解释
查看>>
MySQL-EXPLAIN执行计划字段解释
查看>>
Zookeeper_阅读源码第一步_在 IDE 里启动 zkServer(单机版)
查看>>
Zookeeper_阅读源码第一步_在 IDE 里启动 zkServer(集群版)
查看>>
Zookeeper概述
查看>>
Zookeeper一致性级别
查看>>
分布式系统的一致性级别划分及Zookeeper一致性级别分析
查看>>
单例模式的几种实现方式及对比
查看>>
Java中synchronized关键字你知道多少
查看>>
IDEA乱码Tomcat控制台乱码输出乱码报文乱码
查看>>
如何用上新版本的 IDEA(IDEA 2019.2.2版本)
查看>>
第十二周学习记录
查看>>
ORM(Object Relation Mapping)
查看>>
ios UIWebView 在开发中加载文件
查看>>
《大学之路》读后感(2)
查看>>
Openfire 多人聊天室 消息记录的问题
查看>>
实验二
查看>>
开始Flask项目
查看>>