div 팝업 효과 CSS 및 JS-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

div 팝업 효과 CSS 및 JS

高洛峰

Nov 24, 2016 am 09:26 AM

div

코드 직접 업로드:
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 
}

확인

성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

관련 기사

'CSS4'업데이트Apr 11, 2025 pm 12:05 PM

내가 CSS4¹에 처음으로 차지했기 때문에, 그것에 대해 많은 논의가있었습니다. 나는 여기 다른 사람들로부터 내가 가장 좋아하는 생각을 마무리하려고 할 것입니다. 거기 있습니다

세 가지 유형의 코드Apr 11, 2025 pm 12:02 PM

새 프로젝트를 시작할 때마다 원하는 경우 세 가지 유형 또는 카테고리로보고있는 코드를 구성합니다. 그리고 나는 이러한 유형을 적용 할 수 있다고 생각합니다

HTTPS는 쉽습니다!Apr 11, 2025 am 11:51 AM

나는 HTTPS의 복잡성을 공개적으로 비난하는 것에 대해 유죄를 선고했다. 과거에는 타사 공급 업체로부터 SSL 인증서를 구매했으며 문제가있었습니다.

HTML 데이터 속성 안내서Apr 11, 2025 am 11:50 AM

HTML, CSS 및 JavaScript의 데이터 속성에 대해 알고 싶었던 모든 것.

자바 스크립트의 불변성 이해Apr 11, 2025 am 11:47 AM

이전에 JavaScript에서 불변성으로 작업하지 않은 경우 변수를 새로운 값 또는 재 할당과 혼동하기가 쉽습니다.

시맨틱하고 액세스 가능한 상태를 유지하면서 요즘 사용자 정의 확인란, 라디오 버튼 및 토글 스위치를 만들 수 있습니다. 우리는조차 필요하지 않습니다

각주 문자Apr 11, 2025 am 11:34 AM

각주에 적합한 특수 슈퍼 세트 번호 문자가 있습니다. 여기에 다음과 같습니다.

HTML, CSS 및 JavaScript로 애니메이션 카운트 다운 타이머를 만드는 방법Apr 11, 2025 am 11:29 AM

프로젝트에 카운트 다운 타이머가 필요한 적이 있습니까? 그런 것은 플러그인에 도달하는 것이 당연하지만 실제로는 훨씬 더 많습니다.

See all articles

핫 AI 도구

뜨거운 도구

DVWA(Damn Vulnerable Web App)는 매우 취약한 PHP/MySQL 웹 애플리케이션입니다. 주요 목표는 보안 전문가가 법적 환경에서 자신의 기술과 도구를 테스트하고, 웹 개발자가 웹 응용 프로그램 보안 프로세스를 더 잘 이해할 수 있도록 돕고, 교사/학생이 교실 환경 웹 응용 프로그램에서 가르치고 배울 수 있도록 돕는 것입니다. 보안. DVWA의 목표는 다양한 난이도의 간단하고 간단한 인터페이스를 통해 가장 일반적인 웹 취약점 중 일부를 연습하는 것입니다. 이 소프트웨어는