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

转载 2015年07月08日 16:54:43

直接上代码:

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


相关文章推荐

html.css.javacsript

  • 2012-09-19 08:37
  • 57.90MB
  • 下载

html+css+jQuery实现多种图片简单切换功能大综合

学习鼠标滑动监听事件,顺便了复习一些其他相关的事件,记录下来以备下次实现类似功能时参考。 拥有以下功能: 1.向左向右无缝滑动 2.自动轮播 3.鼠标左右滑动,img移动 4.鼠标悬浮img,im...
  • cdzmy
  • cdzmy
  • 2017-04-12 21:06
  • 115

HTML5 -- 使用css3实现简单的响应式布局

本文简单的讲解了如何使用css3实现简单的响应式布局:html5文件: index01</titl

超酷HTML5和CSS3实现的登录及其注册功能表单

日期:2012-4-6  来源:GBin1.com 在线演示  本地下载 过去我们开发登录和注册功能大都使用javascript来实现,今天我们介绍的这个登录及其注册表单不走常人路...
  • jjfat
  • jjfat
  • 2012-04-10 14:57
  • 1062

html+css+jquery实现右下角返回顶部功能

html+css+jquery实现返回顶部功能

仅用CSS+HTML实现图片放大功能

备注:最好在firefox或chrome运行,在IE效果没出现  -。- 效果如下: 备注:实现这个功能我仅使用了一个html和一个css,具体代码如下,好的话可以拿去: -----...

html5+javascript+css3实现下拉列表以及折叠功能

html5+javascript+css3实现下拉列表以及折叠功能 function show(id){ var d = $('#content'+id).css('display...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)