> 웹 프론트엔드 > CSS 튜토리얼 > div 팝업 효과 CSS 및 JS

div 팝업 효과 CSS 및 JS

高洛峰
풀어 주다: 2016-11-24 09:26:13
원래의
1220명이 탐색했습니다.

코드 직접 업로드:
html 코드:

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 코드:

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 
}
로그인 후 복사


확인

관련 라벨:
div
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿