> 웹 프론트엔드 > JS 튜토리얼 > 팝업 창 effect_jquery를 달성하기 위한 jquery의 예제 코드

팝업 창 effect_jquery를 달성하기 위한 jquery의 예제 코드

WBOY
풀어 주다: 2016-05-16 17:12:06
원래의
1243명이 탐색했습니다.

JavaScript에서 팝업창을 구현하는 방법은 기본적으로 브라우저에 사각형 영역을 그려서 처음에는 숨기고, JavaScript 이벤트 발생 시 CSS 속성값을 수정해서만 표시하는 것입니다.

일반적인 단계는 다음과 같습니다.


jQuery 예제 1: 부동 창

<링크 유형 = "text/css" rel="stylesheet" href="css/win.css" mce_href="css/win.css">
< ; /body>
팝업 창

   
제가 제목 표시줄이에요! X

    
저는 창이에요!
🎜>

코드 복사


코드는 다음과 같습니다.


#win{
/*border*/
border:1px red solid ;
/*창의 높이와 너비*/
width: 300px;
height: 200px;
/*창의 위치*/
위치: 절대;
위쪽: 100px ;
왼쪽: 350px;
/*창은 처음에는 보이지 않습니다*/ 디스플레이: 없음;}/*제어 배경색 스타일*/#title{ background-color : blue; color : red;
/*제목 표시줄의 왼쪽 내부 여백 제어*/
padding- left: 3px;
}
#cotent{
padding-left : 3px;
padding-top : 5px;
}
/*닫기 버튼 위치 제어*/
#close{
margin-left: 188px;
/*마우스가 >



코드 복사


로 이동할 때 코드는 다음과 같습니다.


function showWin(){
/*div 노드를 찾아 반환*/
var winNode = $("#win");
//방법 1: js를 사용하여 CSS 값을 수정하여 표시 효과 달성
// winNode.css("display", "block ");
//방법 2: jquery의 show 메소드를 사용하여 표시 효과 달성 표시 효과
// winNode.show("slow");
//방법 3: jquery의 fadeIn 메서드를 사용하여 페이드 인 구현
winNode.fadeIn("slow");
}
function hide(){
var winNode = $("#win");
//방법 1: CSS 값 수정
//winNode.css("display", "none" );
//방법 2: jquery의 fadeOut 메서드
winNode.fadeOut("slow");
//방법 3: jquery hide 메서드 winNode.hide("slow");}
관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿