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

最新推荐文章于 2023-07-21 15:09:15 发布

夜梦星尘

最新推荐文章于 2023-07-21 15:09:15 发布

阅读量695

点赞数

分类专栏：前端技术文章标签： html css javascript

前端技术专栏收录该内容

5 篇文章 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" ο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>

夜梦星尘

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
使用简单的html+css+javacsript实现dialog功能

直接上代码：简单的html+css+javascript实现对话框一个很简单的模态对话框点击这里关闭 /* 定义模态对话框外面的覆盖层样式 */ #modal-overlay { visibility: hidden;
复制链接

扫一扫