JavaScript에서 팝업창을 구현하는 방법은 기본적으로 브라우저에 사각형 영역을 그려서 처음에는 숨기고, JavaScript 이벤트 발생 시 CSS 속성값을 수정해서만 표시하는 것입니다.
일반적인 단계는 다음과 같습니다.
제가 제목 표시줄이에요! X
저는 창이에요!
🎜>
코드 복사
코드는 다음과 같습니다.
#win{
/*border*/
border:1px red solid ;
/*창의 높이와 너비*/
width: 300px;
height: 200px;
/*창의 위치*/
위치: 절대;
위쪽: 100px ;
왼쪽: 350px;
/*제목 표시줄의 왼쪽 내부 여백 제어*/
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");}