直接上代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>简单的html+css+javascript实现对话框</title>
</head>
<body>
<div><input type="button" οnclick="overlay()" value="显示dialog" /></div>
<div id="modal-overlay">
<div class="modal-data">
<p>一个很简单的模态对话框 </p>
<p>点击<a οnclick="overlay()" href="">这里</a>关闭</p>
</div>
</div>
<style>
/* 定义模态对话框外面的覆盖层样式 */
#modal-overlay {
visibility: hidden;
position: absolute; /* 使用绝对定位或固定定位 */
left: 0px;
top: 0px;
width:100%;
height:100%;
text-align:center;
z-index: 1000;
background-color: #333;
opacity: 0.5; /* 背景半透明 */
}
/* 模态框样式 */
.modal-data{
width:300px;
margin: 100px auto;
background-color: #fff;
border:1px solid #000;
padding:15px;
text-align:center;
}
</style>
<script typt="text/javascript">
function overlay(){
var e1 = document.getElementById('modal-overlay');
e1.style.visibility = (e1.style.visibility == "visible" ) ? "hidden" : "visible";
}
</script>
</body>
</html>