출처 : http://mytory.co.kr/archives/812
http://mytory.co.kr/archives/783
http://stackoverflow.com/questions/3220995/jquery-document-onclick-doesnt-work-when-clicking-an-embed-flash-on-ie-bu
|
var |
jQuery의 .scrollLeft() 함수는 좌우로 스크롤된 화면이 왼쪽부터 몇 px인지 구하는 함수다. 보통은 0일 거다.
jQuery의 .scrollTop() 함수는 스크롤된 화면이 맨 위에서부터 몇 px인지 구하는 함수다.
jQuery의 .width() 함수는 너비를 구하는 함수인데, $(window).width() 를 하면 현재 화면의 너비를 구한다. 윈도우를 전체화면으로 하지 말고 사이즈를 줄여 놓고 값을 구해 보면 전체 가로 사이즈보다 작게 나오는 것을 알 수 있다.
jQuery의 .height() 함수 역시 마찬가지인데, $(window).height() 라고 하면 윈도우에서 메뉴바 같은 것들을 빼고 실제 사용되는 부분의 높이만 구해 준다. 나는 높이 800px 화면의 노트북을 사용한데, 실제 사용되는 영역은 675px이었다.
레이어를 Modal 처럼 띄우기 위한 배경 검은 막 씌우기
jQuery modal window를 만드는 튜토리얼에서 그 방법을 발견했다. 우리가 해왔던 방식하고 크게 다르지 않았다. 이것만 가지고 플러그인을 만들어 볼까 하는 생각도 들었다.
자, 반투명 검은 막을 만드는 방법은 간단하다.(예제부터 보길 바라면 아래 파일을 사용하면 된다.)
cfile25.uf.13211E484D4BC96836139F.html
일단, HTML의 어딘가에 아래 코드를 끼워 넣는다. 어디든 별 상관 없지만 찾기 편한 곳에 둬야 할 거다.
<div id="mask"></div> |
다음은 CSS인데 아래처럼 해 준다.
#mask {position:absolute;left:0;top:0;z-index:9000;background-color:#000;display:none;} |
마지막으로 jQuery 코드를 짜 보자.
function wrapWindowByMask(){//화면의 높이와 너비를 구한다.var maskHeight = $(document).height();var maskWidth = $(window).width(); //마스크의 높이와 너비를 화면 것으로 만들어 전체 화면을 채운다.$('#mask').css({'width':maskWidth,'height':maskHeight}); //애니메이션 효과$('#mask').fadeIn(1000);$('#mask').fadeTo("slow",0.8);} |
자, 위 함수를 사용하면 반투명의 검은 마스크가 나타날 것이다. 그럼 어떻게 닫을까?
두 가지가 있을 것이다.
1.mordal window의 닫기 버튼을 눌렀을 때
2.반투명 검은 막을 눌렀을 때
두 경우 모두를 지원하기 위해서 click할 때 일어나는 이벤트를 두 군데 걸어야겠다.
이건 원본에서 그냥 긁어 온 코드다. .window는 검은 막 위에 뜬 mordal window다.
//닫기 버튼을 눌렀을 때$('.window .close').click(function (e) {//링크 기본동작은 작동하지 않도록 한다.e.preventDefault();$('#mask, .window').hide();}); //검은 막을 눌렀을 때$('#mask').click(function () {$(this).hide();$('.window').hide();}); |
위 코드들은 당연히 jQuery(document).ready(function(){ /*코드 넣는 부분*/ }) 으로 감싸 줘야 한다.
완성된 코드는 아래와 같다.
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><style>#mask {position:absolute;z-index:9000;background-color:#000;display:none;left:0;top:0;}.window{display: none;position:absolute;left:100px;top:100px;z-index:10000;}</style><script>function wrapWindowByMask(){//화면의 높이와 너비를 구한다.var maskHeight = $(document).height();var maskWidth = $(window).width(); //마스크의 높이와 너비를 화면 것으로 만들어 전체 화면을 채운다.$('#mask').css({'width':maskWidth,'height':maskHeight}); //애니메이션 효과 - 일단 1초동안 까맣게 됐다가 80% 불투명도로 간다.$('#mask').fadeIn(1000);$('#mask').fadeTo("slow",0.8); //윈도우 같은 거 띄운다.$('.window').show();}$(document).ready(function(){//검은 막 띄우기$('.openMask').click(function(e){e.preventDefault();wrapWindowByMask();});//닫기 버튼을 눌렀을 때$('.window .close').click(function (e) {//링크 기본동작은 작동하지 않도록 한다.e.preventDefault();$('#mask, .window').hide();}); //검은 막을 눌렀을 때$('#mask').click(function () {$(this).hide();$('.window').hide();});});</script></head><body><div id="mask"></div><div class="window"><input type="button" href="#" class="close" value="나는야 닫기 버튼(.window .close)"/></div><a href="#" class="openMask">검은 막 띄우기</a></body></html> |
간단한 레이어 팝업
|
<style type="text/css"> |