关闭

使用简单的html+css+javacsript实现dialog功能

标签: htmlcssjavascript
241人阅读 评论(0) 收藏 举报
分类:

直接上代码:

<!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" onclick="overlay()" value="显示dialog" /></div>
	<div id="modal-overlay"> 
	    <div class="modal-data">     
	        <p>一个很简单的模态对话框 </p>
	        <p>点击<a onclick="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>


0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:22838次
    • 积分:188
    • 等级:
    • 排名:千里之外
    • 原创:4篇
    • 转载:7篇
    • 译文:0篇
    • 评论:8条
    文章分类
    最新评论