닫기
이전 다음

NOTICE

새로움을 향한 설.레.임

layer popup(레이어 팝업),100%암막 배경

페이지 정보

작성자 홈피사랑 작성일14-07-17 16:48 조회24,491회 댓글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

 

 

댓글목록

등록된 댓글이 없습니다.

홈피사랑 제공서비스

  • 홈피사랑 홈페이지제작 1.웹표준, 크로스브라우징 지원

    웹표준, 크로스브라우징 지원

    IE, 크롬, 사파리,파이어폭스 등 어떤 브라우저에서도 동일하게 홈페이지가 보여질 수 있도록 제작됩니다.

  • 홈피사랑 홈페이지제작 2.호스팅/도메인 1년 무상지원

    호스팅/도메인 1년 무상지원

    기본형 호스팅,도메인 1년 무상지원

  • 홈피사랑 홈페이지제작 3.원본파일제공

    원본파일제공

    추후 수정 및 유지관리가 용이하도록 제작완료 후 홈페이지 소스를 제공합니다.

  • 홈피사랑 홈페이지제작 4.검색등록 무료지원

    검색등록 무료지원

    네이버,다음 사이트 및 지역검색 등록 지원 및 노출 키워드제안(협의후)