div模拟模态对话框
来源:互联网 发布:计件工资软件破解版 编辑:程序博客网 时间:2024/06/16 05:20
本文使用div的形式来模拟模态对话框。
实现原理:是通过在最上层增加一个全屏的div,然后设置改div的透明度和背景颜色,最后在div上在加一个div用于模拟对话框的形式即可实现。
详细代码及说明如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>三生草</title>
<style>
html,body{height:100%;}
<!-- 下面这个center是实现最外层模拟对话框的那个div。其中z-index设置改div所在的层数。可保证该div在最上层出现。-->
.center{
position:absolute;
left:50%;
top:30px;
width:300px;
margin-top:50px;
margin-left:-116px;
border:2px solid #000;
background-color:#ccf;
z-index:200;
text-align:center;
}
<!-- 下面这个grayout是实现倒数第二层的那个透明屏障,它的透明度为80%,铺满了整个屏幕。它的z-index比上面的那个div小,比其他的大。-->
.grayout{
position:absolute;
z-index:50;
top:0px;
left:0px;
width:100%;
height:100%;
filter:alpha(opacity=80);
-moz-opacity:0.8;
opacity:0.80;
font-size:70pt;
background-color:#999;
text-align:center;
}
</style>
<script>
function ss()
{
/*点击“open dialogButton”用于实现上面的那两个div的显示,从而实现了模拟模态对话框的效果。*/
document.getElementById("sst").style.display="block";
document.getElementById("ssr").style.display="block";
}
function removeDialog()
{
/*点击“close”用于实现上面的那两个div的隐藏。从而关闭模态对话框的形态*/
document.getElementById("sst").style.display="none";
document.getElementById("ssr").style.display="none";
}
</script>
</head>
<body>
<br/>
<center>
<h3>This is Html5</h3>
<input type="button" id="dialogButton" value="open dialogButton" onclick="ss()">
<div class="grayout" style="display:none" id="sst">
</div>
<div style="align:center;display:none" class="center" id="ssr">
<h1 style='align:center;border-bottom:1px solid black;'>close</h1>
<div style='align:center;background:white'>
<form>
<br><input type='button' value='close' onclick='removeDialog();'>
</form>
</div>
</div>
</center>
</body>
</html>
- div模拟模态对话框
- div,模拟,模态对话框[非常实用]
- 模拟模态对话框
- 用div模拟模态对话框展现某url的内容
- DIV 模拟模态窗口
- JavaScript+div实现模态对话框
- 用DIV模拟TEXTAREA【QQ空间说说对话框】
- css javascript div实现网页的模态对话框
- div层,实现模式窗口/模态窗口/模式对话框
- div 对话框
- div对话框
- 在WPF页面中用Popup模拟模态对话框
- Silverlight 之模态对话框的通用模拟
- 在WPF页面中用Popup模拟模态对话框
- MFC 对话框传参及非模态对话框的隐藏运行、模拟模态对话框的运行方式
- 用css+div+javascript模拟模态窗口
- 用div模拟alert对话框,N秒不点击自动关闭(适用IE6、IE7、firefox)
- JavaScript+DIV模态对话框的完美实现(克服select问题)
- ZOJ3963-Heap Partition
- Java总结篇系列:Java多线程(一)
- 红黑树 删除某节点后 旋转3次 举例
- 【MongoDB for Java】Java操作MongoDB
- vue.js:[Vue warn]: Cannot find element:
- div模拟模态对话框
- vert.x:compose
- effective--构建器
- 图层遮盖式进度条
- Python爬虫学习笔记(2):多线程入门
- mysql拷贝表的几种方式
- 欢迎使用CSDN-markdown编辑器
- c语言基础(二)
- 实用工具类