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

来源：互联网发布：淘宝童装模特女孩编辑：程序博客网时间：2024/05/13 17:37

直接上代码：

<!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