jQuery 팝업창 완성 코드(가운데, 왼쪽, 오른쪽)_jquery

핵심 코드:

코드 복사 코드는 다음과 같습니다.

//높이를 가져옵니다. 창
var windowHeight;//창 너비 가져오기
var windowWidth
//팝업 창 너비 가져오기
var popWidth; 팝업 창의 높이를 가져옵니다
var popHeight;
function init(){
windowHeight=$(window).height()
windowWidth=$(window).width() ;
popHeight=$(".window").height( );
popWidth=$(".window").width()
}
//창을 닫는 방법
function closeWindow(){
$(".title img" ).click(function(){
$(this).parent().parent().hide("slow");
});
//팝업 중심 창 정의 방법
function popCenterWindow(){
init()
//왼쪽 상단 모서리의 Y 오프셋을 계산합니다. 팝업 창
var popY=(windowHeight-popHeight)/2
var popX=(windowWidth-popWidth)/2
//alert('www.jb51.net'); 🎜>//창 위치 설정
$("#center").css( "top",popY).css("left",popX).slideToggle("slow")
closeWindow ();
}
function popLeftWindow(){
init()
//팝업 창 왼쪽 상단의 Y 오프셋을 계산합니다.
var popY=windowHeight -popHeight;//var popX=-(windowWidth-popWidth);
//alert(popY)
//창 위치 설정
$("#left"). css("top",popY-50).css("left",50).slideToggle("slow");
closeWindow()
}
function popRightWindow(){
init ();//팝업 창 왼쪽 위 모서리의 Y 오프셋을 계산합니다.
var popY=windowHeight-popHeight;
var popX=windowWidth-popWidth; www.cnblogs.com/jihua);
//창 위치 설정
$("#right").css(" top",popY-50).css("left",popX- 50).slideToggle("느림");
closeWindow();
}


전체 코드:

jQuery 팝업창 - 스크립트 홈

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title> </title> <style type="text/css"> .window{ width:250px; background-color:#d0def0; position:absolute; padding:2px; margin:5px; display:none; } .content{ height:150px; background-color:#FFF; font-size:14px; overflow:auto; } .title{ padding:2px; color:#0CF; font-size:14px; } .title img{ float:right; } </style> <div style="width:600px;margin-left:auto;margin-right:auto;margin-top:160px;"> <input type="button" value="居中窗口" id="btn_center"><input type="button" value="居左下角" id="btn_left">스크립트 홈 중심 창<input type="button" value="居右下角" id="btn_right"> </div>www.jb51.net<div class="window" id="center"> <div id="title" class="title"> <img src="http://files.jb51.net/file_images/article/201210/close.jpg" alt="jQuery 팝업창 완성 코드(가운데, 왼쪽, 오른쪽)_jquery"> </div> <div class="content">스크립트 홈 왼쪽 창</div> </div>www.jb51.net<div class="window" id="left"> <div id="title2" class="title"> <img src="http://files.jb51.net/file_images/article/201210/close.jpg" alt="jQuery 팝업창 완성 코드(가운데, 왼쪽, 오른쪽)_jquery"> </div> <div class="content">스크립트 홈 오른쪽 창</div> </div>www.jb51.net<div class="window" id="right"> <div id="title3" class="title"> <img src="http://files.jb51.net/file_images/article/201210/close.jpg" alt="jQuery 팝업창 완성 코드(가운데, 왼쪽, 오른쪽)_jquery"> </div> <div class="content"> </div> </div> [Ctrl A 모두 선택 참고:
외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다. ]저자 cnblogs 지화