jquery 불투명 배경 레이어 띄우기 / javascript layer popup / modal popup window / jquery 모달 팝업창 만들기 구현
JAVASCRIPT/소스코드 2015. 10. 13. 21:31jquery를 이용해서 화면 전체를 덮는 불투명한 레이어 팝업창 띄우기로
화면을 불러왔을 때와 띄우기 버튼 등을 클릭했을 때 실행된다.
[화면을 불러오면 바로 실행]
[스크롤을 이동해도 가려진 부분도 포함]
[불투명 배경 레이어의 아무 곳이나 클릭하면 닫기(ESC 키 포함)]
["배경용 불투명 레이어 띄우기"를 클릭해서 띄우기]
["배경용 불투명 레이어 띄우기"를 클릭해서 띄우기]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>okkks.tistory.com</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<style>
.opacity_bg_layer {display:none;position:absolute; top:0; left:0; width:100%; height:100%; background:#000; opacity:.5; filter:alpha(opacity=50); z-index:10;} // 불투명 레이어 CSS 설정
</style>
<script type="text/javascript">
/* 불투명 배경 레이어 뛰우기 */
function opacity_bg_layer() {
if(!$('.opacity_bg_layer').length) { // 불투명 배경 레이어가 없으면 생성
$('<div class="opacity_bg_layer"></div>').appendTo($('body'));
}
var oj = $(".opacity_bg_layer");
// 화면의 가로, 세로 알아내기
var w = $(document).width();
var h = $(document).height();
oj.css({'width':w,'height':h}); // 불투명 배경 레이어 크기 설정
oj.fadeIn(500); // 불투명 배경 레이어 보이기(속도:0.5초)
}
/* 레이어 닫기 */
function layer_pop_close() {
if($('.opacity_bg_layer').length) { // 불투명 배경 레이어가 실행된 상태에서만 진행
// 불투명 배경 레이어 삭제(속도:0.5초)
var oj = $('.opacity_bg_layer');
oj.fadeOut(500, function() {
oj.remove();
});
}
}
// 브라우저 창 크기 변경에 따른 처리
$(window).resize(function() {
if($('.opacity_bg_layer').length) { // 불투명 배경 레이어가 실행된 상태에서만 진행
opacity_bg_layer();
}
});
/* 화면을 불러온 후 처리 */
$(document).ready(function() {
opacity_bg_layer();
$(document).on('click', '.opacity_bg_layer', function() { // 불투명 배경 레이어를 클릭하면 닫기
layer_pop_close();
}).keyup(function(e) { // esc 키 사용하면 불투명 배경 레이어 닫기
if(e.keyCode == 27) layer_pop_close();
}).on('click', '.opacity_bg_layer_show', function() { // "배경용 불투명 레이어 띄우기"를 클릭하면 불투명 배경 레이어 보이기
opacity_bg_layer();
});
});
</script>
</head>
<body>
<div><a href="http://okkks.tistory.com" target="_blank">okkks.tistory.com</a></div>
<span><a href="http://okkks.tistory.com" target="_blank">okkks.tistory.com</a></span>
<span><a href="http://okkks.tistory.com" target="_blank">okkks.tistory.com</a></span>
<span><a href="http://okkks.tistory.com" target="_blank">okkks.tistory.com</a></span>
<span><a href="http://okkks.tistory.com" target="_blank">okkks.tistory.com</a></span>
<span><a href="http://okkks.tistory.com" target="_blank">okkks.tistory.com</a></span>
<span><a href="http://okkks.tistory.com" target="_blank">okkks.tistory.com</a></span>
<span><a href="http://okkks.tistory.com" target="_blank">okkks.tistory.com</a></span>
<span><a href="http://okkks.tistory.com" target="_blank">okkks.tistory.com</a></span>
<span><a href="http://okkks.tistory.com" target="_blank">okkks.tistory.com</a></span>
<span><a href="http://okkks.tistory.com" target="_blank">okkks.tistory.com</a></span>
<span><a href="http://okkks.tistory.com" target="_blank">okkks.tistory.com</a></span>
<span><a href="http://okkks.tistory.com" target="_blank">okkks.tistory.com</a></span>
<div><a href="http://okkks.tistory.com" target="_blank">okkks.tistory.com</a></div>
<div><a href="http://okkks.tistory.com" target="_blank">okkks.tistory.com</a></div>
<div><a href="http://okkks.tistory.com" target="_blank">okkks.tistory.com</a></div>
<div><a href="#" class="opacity_bg_layer_show">배경용 불투명 레이어 띄우기</a></div>
<div><a href="http://okkks.tistory.com" target="_blank">okkks.tistory.com</a></div>
<div><a href="http://okkks.tistory.com" target="_blank">okkks.tistory.com</a></div>
<div><a href="http://okkks.tistory.com" target="_blank">okkks.tistory.com</a></div>
<div><a href="http://okkks.tistory.com" target="_blank">okkks.tistory.com</a></div>
<div><a href="http://okkks.tistory.com" target="_blank">okkks.tistory.com</a></div>
<div><a href="http://okkks.tistory.com" target="_blank">okkks.tistory.com</a></div>
<div><a href="http://okkks.tistory.com" target="_blank">okkks.tistory.com</a></div>
</body>
</html>
'JAVASCRIPT > 소스코드' 카테고리의 다른 글
| 초간단 자바스크립트 명령어-뒤로가기,앞으로가기,새로고침,창닫기,인쇄초간단 자바스크립트 명령어 (0) | 2015.10.15 |
|---|---|
| 자바스크립트 팝업창 띄우기 여러버젼 (0) | 2015.10.15 |
| [Js] 부모창 새로고침, opener.location.reload (0) | 2015.10.15 |
| 링크 팝업 한번만 띄우기 및 팝업 존재 여부 확인 (0) | 2015.10.15 |
| 자바스크립트 주민등록번호 (0) | 2015.02.03 |
| 자바스크립트 공백제거 (0) | 2015.02.03 |
| javascript- RadioButton 선택여부 확인하기 (0) | 2015.02.03 |
| javascript 숫자 4단위 한글로 변환 (0) | 2014.09.16 |
nineDeveloper
안녕하세요 현직 개발자 입니다 ~ 빠르게 변화하는 세상에 뒤쳐지지 않도록 우리모두 열심히 공부합시다 ~! 개발공부는 넘나 재미있는 것~!