<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> </HEAD> //테스트용 URL jquery <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <style type="text/css"> #mask{ position:absolute; z-index:1000; //z-index는 z축을 말하는 것이다. width- height와 달리 보이진 않지만 높이를 지정 background-color:#000; display:none; left:0; top:0; } #joinMask{ position:absolute; z-index:1001; background-color:#FFF; display:none; left:0; top:0; } </style> <script> var joinMaskHeight = 300; //팝업레이어의 사이즈 var joinMaskWidth = 500; function wrapWindowByMask(){ var maskHeight = $(document).height(); //브라우저 사이즈를 구한다. var maskWidth = $(window).width(); var joinMaskTop = ( maskHeight / 2 ) - (joinMaskHeight / 2); // 가운데 레이어를 중앙에 띄우기 위한 var joinMaskleft = ( maskWidth / 2 ) - (joinMaskWidth / 2); // top과 left를 구하는 식 $('#mask').css({'width':maskWidth,'height':maskHeight}); // 팝업창의 속성지정 $('#joinMask').css({'width':joinMaskWidth,'height':joinMaskHeight, 'background-color':'#FFFFFF', 'top':joinMaskTop, 'left':joinMaskleft}); $('#mask').fadeTo("slow",0.8); // 느린속도로 0.8의 투명도로 처리한다. 1이 최고 $('#joinMask').fadeTo("slow",0.9); $('#joinIFrame').attr('src','join.blog');// 아이프레임의 속성지정 레이어가 뜰때 아이프레임에 페이지를 로딩 } $(document).ready(function(){ //dom이 모두 로드된 후 실행할 함수 자바스크립트의 function과 같다고 보면 된다. $('#mask').click(function () { //mask 레이어를 클릭하면 발생하는 함수 $(this).hide(); //Layer display-non처리 $('#joinMask').hide(); }); }); $(window).resize(function(){ //화면 크기가 바뀌면 발생하는 이벤트 반응형 웹을 만들때는 이부분을 수정해주면 될듯 var joinMaskTop = ($(document).height() / 2) - (joinMaskHeight / 2); var joinMaskleft = ($(window).width() / 2) - (joinMaskWidth / 2); $('#mask').css({'width':$(window).width(),'height':$(window).height()}); $('#joinMask').css({'top':joinMaskTop, 'left':joinMaskleft}); }); 스크롤 변화시 레이어 위치 변환. 필요없어서 주석처리를 했다. /*$(window).scroll(function(){// $('#mask').css({'top':$(window).scrollTop(),'left':$(window).scrollLeft()}); });*/ </script> <BODY> <div id="mask" z-index="100"></div> <div id="joinMask" z-index="150"></div> <input type="button" value="레어어생성" onclick="wrapWindowByMask()"> </BODY> </HTML>
Jquery 이용하다보니 자바스크립트랑 차이점은 Jquery를 한번더 타서 기존 스크립트랑 미세하게 다른점이 발생하게 됩니다.
공부하면서 하나씩 올릴꺼구요~
위의 스크립트할때 포인트 IE는 Jquery를 선언하기 전에 DOCTYPE를 선언을 해주지 않으면 먹통이 됩니다.
header로 Jquery를 뺄때 DOCTYPE도 같이 선언해둬야 IE에서 정상처리 됩니다.
'Programming > 과거포스팅' 카테고리의 다른 글
| Spring MVC(2) CharacterEncodingFilter (2) | 2013.01.21 |
|---|---|
| Spring MVC(1) Hello World (2) | 2013.01.20 |
| Maven을 이용한 이클립스 스프링MVC 개발환경 셋팅 (4) | 2013.01.13 |
| WebView의 화면 전환 처리 (2) | 2012.12.23 |
| delete Title (0) | 2012.12.22 |
