zoukankan      html  css  js  c++  java
  • JS模态框 简单案例

    演示:

    <!doctype html>
    <html lang="en">
     <head>
      <meta charset="UTF-8">
      <meta name="Generator" content="EditPlus®">
      <meta name="Author" content="">
      <meta name="Keywords" content="">
      <meta name="Description" content="">
      <title>Document</title>
      <style>
    	*{
    		margin: 0;
    		padding: 0;
    	}
    	a{
    		display: block;
    		color: #090;
    		 80px;
    		height: 32px;
    		border:1px solid #090;
    		text-align: center;
    		text-decoration: none;
    		line-height: 32px;
    		margin: 50px auto;
    	}
    	a:hover{
    		background:#090;
    		color: #fff;
    	}
    	#modal-overlay{
    		visibility: hidden;
    		position: fixed;
    		left: 0;
    		top: 0;
    		 100%;
    		height: 100%;
    		background:rgba(0,0,0,.5);
    		z-index: 999;
    		text-align: center;
    	}
    	.modal-data{
    		 300px;
    		margin: 100px auto;
    		background:#fff;
    		border:1px solid #090;
    		text-align: center;
    	}
    	p{
    		 80px;
    		height: 32px;
    		line-height: 32px;
    		text-align: center;
    		margin: 20px auto;
    	}
      </style>
     </head>
     <body>
    	<a href="javascript:;" onclick='overlay()'>模态框</a>
    	<div id="modal-overlay">
    		<div class="modal-data">
    			<p>模态框</p>
    			<a href="javascript:;" onclick='overlay()'>关闭</a>
    		</div>
    	</div>
    	<script>
    		function overlay(){
    			var el = document.getElementById("modal-overlay");
    			el.style.visibility = (el.style.visibility == "visible")?"hidden":"visible";
    		}
    	</script>
     </body>
    </html>
    
  • 相关阅读:
    TestNG+maven+idea 环境基本使用
    linux基本命令
    linux -查看cpu 内存 磁盘 端口 进程
    Scanner类、Random类、ArrayList 类
    (四)面向对象
    (三)数组
    (二)流程-循环
    (一)java基础_常量+变量+数据类型+运算符+方法
    SQL (二)
    SQL(一)
  • 原文地址:https://www.cnblogs.com/zhang-wang/p/6733027.html
Copyright © 2011-2022 走看看