layer popup(레이어 팝업),100%암막 배경
페이지 정보
작성자 홈피사랑 작성일14-07-17 16:48 조회25,523회 댓글0건관련링크
본문
간단한 레이어팝업 예제 입니다.
예제링크의 이미지를 아무데나 클릭하면 100%암막 배경과 함께 레이어 팝업이 가운데로 뜹니다.
팝업을 띄우면서 body에 overflow:hidden을 해서 스크롤을 없애버리고 위로 뜨는 팝업을 position:fixed를 하면
복잡한 코드 필요 없이 항상 화면 중간에 뜨는 레이어를 쉽게 만들수 있습니다.
예제코드
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>홈페이지제작업체 - 홈피사랑 HOMPYLOVE</title>
<style type="text/css">
#wrap{width:100%; height:2400px; background:url('img/img03.jpg') no-repeat center top;}
#layer_pop{position:fixed; width:100%; height:2000px; top:0px; left:0px; background:url('img/dark_bg.png'); display:none;}
#layer_pop .pop_cont{position:absolute;}
.btn_close{display:block; font-weight:bold; color:#FFFFFF; padding:3px; text-align:right;}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
popConfig();
});
function popConfig(){
$(".btn_open").click(layerOpen);
$(".btn_close").click(layerClose);
}
function layerOpen(){
$("#layer_pop").css("display","block");
var tx = ($(window).width()-$("#layer_pop .pop_cont").width())/2;
var ty = ($(window).height()-$("#layer_pop .pop_cont").height())/2;
$("#layer_pop .pop_cont").css({left:tx+"px",top:ty+"px"});
$("body").css("overflow","hidden");
}
function layerClose(){
$("#layer_pop").css("display","none");
$("body").css("overflow","auto");
}
</script>
</head>
<body>
<div id="layer_pop">
<div class="pop_cont">
<img src="img/img01.jpg" width="400" height="331"/>
<a href="#" class="btn_close">X close</a>
</div>
</div>
<a href="#" class="btn_open">
<div id="wrap">
</div>
</a>
</body>
</html>
예제링크
http://hompylove.com/2014/test/layerpop/
예제다운
http://hompylove.com/2014/test/layerpop/down.zip
댓글목록
등록된 댓글이 없습니다.
