Home > Article > Web Front-end > div pop-up effect css and js

div pop-up effect css and js

高洛峰Original: 2016-11-24 09:26:131180browse

Go directly to the code:
html code:

Html代码 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<html> 
<head> 
 
<title>testdiv</title> 
 
<link rel="stylesheet" type="text/css" media="screen" href="http://www.php1.cn/">  
<script src="div.js" type="text/javascript"></script>  
</head> 
<body> 
<a href="http://www.php1.cn/"> <a href="http://www.php1.cn/"> <div id="light" class="white_content"> 
      <div class="close"><a href="http://www.php1.cn/">       <div class="con">  
       问题描述：<input type="text" /><br> 
       问题类型：<select ><option value="1">1</option><option value="2">2</option></select><br> 
       意见描述：<input type="text"/> 
      </div> 
</div> 
<div id="light2" class="white_content"> 
      <div class="close"><a href="http://www.php1.cn/">       <div class="con">  
      content2  
      </div> 
</div> 
<div id="fade" class="black_overlay"></div> 
</body> 
</html>

js code:

Js代码 
function show(tag){ 
 var light=document.getElementById(tag); 
 var fade=document.getElementById(&#39;fade&#39;); 
 light.style.display=&#39;block&#39;; 
 fade.style.display=&#39;block&#39;; 
 } 
function hide(tag){ 
 var light=document.getElementById(tag); 
 var fade=document.getElementById(&#39;fade&#39;); 
 light.style.display=&#39;none&#39;; 
 fade.style.display=&#39;none&#39;; 
} 
 
css代码：
Js代码 
* { 
 margin:0; 
 padding:0 
} 
html, body { 
 height: 100%; 
 width: 100%; 
 font-size:12px 
} 
.white_content { 
 display: none; 
 position: absolute; 
 top: 25%; 
 left: 25%; 
 width: 30%; 
 padding: 6px 16px; 
 border: 12px solid #D6E9F1; 
 background-color: white; 
 z-index:1002; 
 overflow: auto; 
} 
.black_overlay { 
 display: none; 
 position: absolute; 
 top: 0%; 
 left: 0%; 
 width: 100%; 
 height: 100%; 
 background-color:#f5f5f5; 
 z-index:1001; 
 -moz-opacity: 0.8; 
 opacity:.80; 
 filter: alpha(opacity=80); 
} 
.close { 
 float:right; 
 clear:both; 
 width:100%; 
 text-align:right; 
 margin:0 0 6px 0 
} 
.close a { 
 color:#333; 
 text-decoration:none; 
 font-size:14px; 
 font-weight:700 
} 
.con { 
 text-indent:1.5pc; 
 line-height:21px 
}

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Solving css browser compatibility issuesNext article：Solving css browser compatibility issues

See more

div pop-up effect css and js

Related articles