[ 이벤트 팝업소스 ] 활용도 높은 웹싸이트 전체화면 레이어 팝업 소스

 

 

 

 

 

 

 

 

 

 

 

메인화면 위에 겹쳐지는 레이어 팝업 소스

 

 

요즘 포탈이나 쇼셜쇼핑에서 보면 팝업창이 보다는 레이어를 이용한 팝업을 많이 보게 되는데요. 본화면을 보기전에 강제적으로 광고나 로그인 화면을 먼저 보이도록 할때 유용한 방법입니다. 전체화면 팝업 관련해서 소스가 없어서 직접 만들게 되었는데요. 저도 프로그램쪽이 아니라 네이버 지식에도 물어보면서 겨우 만들었습니다. ㅜㅜ 혹시 좀더 간단하게 수정해주실분 있으시면 조언 부탁드리며 허접하지만 필요하신분들은 유용하게 사용해주세요.

 

 

주요기능 : 엔터키로 팝업 닫기 / 전체화면 레이어 설정 / 하루동안 안보이기 쿠키설정

 

 

 

 

 

1단계 레이어 설정

div 레이어 설정을 통해 레이어의 위치와 투명도 크기를 설정하는 부분입니다.

 

left:0px;top:0px : 상단 왼쪽을 기준으로 위치값을 입력하는 부분입니다.

width:100%;height:100 : 레이어의 크기를 조정하는 부분입니다.

opacity=80 : 투명도 수치를 조정하는 부분입니다.

background-image:url(back_top.jpg) : 원래 배경색으로 뒷부분을 흐리게 할려고 했는데 메인에 플래쉬가 있는경우 먹히지가 않더군요. 검정색 배경 이미지를 만들어서 url을 입력해주세요.

z-index:10 : 레이어가 여러게 있는경우 순위를 정하는 부분입니다. 1순위는 수치 1을 기입해주세요.

 

 <style type="text/css">
 #divpop{position:absolute;left:0px;top:0px;width:100%;height:100%;z-index:10;background-color:#000000;filter:alpha

(opacity=80);line-height:450px;vertical-align:middle;text-align:center;display:block;background-image:url(back_top.jpg)}

</style>

 

 

 

 

 

2단계 레이어 본문

div의 내용을 넣는 부분입니다. 저는 div 안에 동영상을 넣었습니다. 하단에 레드색으로 표시된 부분에 원하시는 이벤트 내용을 넣으시면 됩니다.

 

 

 <div id="divpop">
<center>
<table width="640" height="150" cellpadding="0" cellspacing="0">
<tr>
<td height="180">
</td>
<tr>
<td width="640" height="100" valign="center" align="middle" bgcolor=#ffffff>

 

<!-- 레이어 내용입력부분 원하는 내용을 넣어주세요.-->

<embed src="intro.wmv" loop="-1" ShowControls="false"

autostart="true" width="640" height="360" style="BORDER-RIGHT: #ffffff 2px solid; BORDER-TOP: #ffffff 2px solid; FILTER:

progid:DXImageTransform.Microsoft.Blur(PixelRadius=0); BORDER-LEFT: #ffffff 2px solid; BORDER-BOTTOM: #ffffff 2px

solid">

 

<!-- 레이어 닫기 버턴-->

<form name="divpop_frm" method="post" action="">
<input type="checkbox" name="chkbox" value="Y" onClick="close_divpop('divpop_frm', 'divpop');" />
<font color=000000>오늘 하루 이 창을 열지 않음</font>
 <a href="javascript:;" onclick="close_divpop('divpop_frm', 'divpop')"><font color=000000><b>[닫기]</b></font></a>
 </form>

</td>
</tr>

</table>

</center>


</div>

 

 

 

 

3단계 ENTER키를 누르면 팝업 닫히는 소스

엔터키를 누르면 전체 팝업창이 닫히는 소스 부분입니다. KeyCode 13이 엔터키입니다. 키코드의 숫자를 변경하여 닫기 버턴을 변경하실수 있습니다.

 

 <script language="javascript">
document.onkeydown = function()
{
   var iTemp;
   if (event.keyCode == 13)
     close_divpop('divpop_frm', 'divpop');
 
}


function close_divpop(frm, div){
document.getElementById(div).style.display='none';
}
</script>

 

 

 

 

3단계 팝업쿠키설정

"오늘하루 보지않기"을 누르면 하루동안 팝업이 뜨지 않도록 설정하는 부분입니다.

 

 

 <script type="text/javascript">
//<![cdata[
 function set_cookie(name, value, expiredays) {
  var todayDate = new Date();
  todayDate.setDate( todayDate.getDate() + expiredays );
  document.cookie = name + "=" + escape( value ) + "; path=/; expires=" + todayDate.toGMTString() + ";"
 }


 function close_divpop(frm, pop) {
  var f = eval("document."+frm);
  if(f.chkbox.checked){
   set_cookie(pop, "Y", 1);
  }
  document.getElementById(pop).style.display = "none";
 }


 cookiedata = document.cookie;
 if(cookiedata.indexOf("divpop=Y") < 0) {
  document.getElementById('divpop').style.display = "block";
 } else {
  document.getElementById('divpop').style.display = "none";
 }
//]]>
</script>

 

 

 

 

레이어 팝업 통합소스

하단 소스를 이용하여 전체화면 팝업 소스을 만들어보세요~

 

 

 

 

 <!-- 레이어 설정 -->

 <style type="text/css">
 #divpop{position:absolute;left:0px;top:0px;width:100%;height:100%;z-index:10;background-color:#000000;filter:alpha

(opacity=80);line-height:450px;vertical-align:middle;text-align:center;display:block;background-image:url(back_top.jpg)}

</style>

 

<!-- 레이어 내용 -->
 <div id="divpop">
<center>
<table width="640" height="150" cellpadding="0" cellspacing="0">
<tr>
<td height="180">
</td>
<tr>
<td width="640" height="100" valign="center" align="middle" bgcolor=#ffffff>

 

 

<embed src="intro.wmv" loop="-1" ShowControls="false"

autostart="true" width="640" height="360" style="BORDER-RIGHT: #ffffff 2px solid; BORDER-TOP: #ffffff 2px solid; FILTER:

progid:DXImageTransform.Microsoft.Blur(PixelRadius=0); BORDER-LEFT: #ffffff 2px solid; BORDER-BOTTOM: #ffffff 2px

solid">

 

<!-- 레이어 닫기 버턴-->

<form name="divpop_frm" method="post" action="">
<input type="checkbox" name="chkbox" value="Y" onClick="close_divpop('divpop_frm', 'divpop');" />
<font color=000000>오늘 하루 이 창을 열지 않음</font>
 <a href="javascript:;" onclick="close_divpop('divpop_frm', 'divpop')"><font color=000000><b>[닫기]</b></font></a>
 </form>

</td>
</tr>

</table>

</center>


</div>

 

<!-- 엔터로 레이어 닫기 -->
<script language="javascript">
document.onkeydown = function()
{
   var iTemp;
   if (event.keyCode == 13)
     close_divpop('divpop_frm', 'divpop');
 
}


function close_divpop(frm, div){
document.getElementById(div).style.display='none';
}
</script>


<!-- 팝업 쿠키설정 -->
<script type="text/javascript">
//<![cdata[
 function set_cookie(name, value, expiredays) {
  var todayDate = new Date();
  todayDate.setDate( todayDate.getDate() + expiredays );
  document.cookie = name + "=" + escape( value ) + "; path=/; expires=" + todayDate.toGMTString() + ";"
 }


 function close_divpop(frm, pop) {
  var f = eval("document."+frm);
  if(f.chkbox.checked){
   set_cookie(pop, "Y", 1);
  }
  document.getElementById(pop).style.display = "none";
 }


 cookiedata = document.cookie;
 if(cookiedata.indexOf("divpop=Y") < 0) {
  document.getElementById('divpop').style.display = "block";
 } else {
  document.getElementById('divpop').style.display = "none";
 }
//]]>
</script>


 

 

 

 

 

주의사항
플레쉬가 레이어 앞으로 나오는경우 ?

레이어가 최상단으로 나와야하는데 플레쉬나 다른 레이어가 먼저 앞으로 나올경우가 있습니다.

이럴경우 레이어는 레이어 설정에서 z-index:10의 수치을 변경하시면 됩니다. 플레쉬는 플래쉬 불러오는 소스부분을 wmode="transparent"로 수정해주시면 정상적으로 작동하실꺼에요~


 


 

 

 

 

이 글을 공유하기

댓글(31)

  • 더레인보우
    2012.10.17 19:25

    좋은 소스 제공, 감사드립니다. ^^

  • 2013.05.09 13:49

    도움많이 되고있습니다!
    제가 근데 잘몰라서그런데 이런 웹사이트 디자인소스는 네이버, 다음 등등 아무 웹사이트에서 사용가능한가요?

    • 2013.05.09 14:36 신고

      안녕하세요. 웹통입니다.^^ 제가 올려드리는 자료는 오픈소스만 선별해서 기재하고 있습니다. 상업적인 디자인에 사용하셔도 무방합니다. 다만 디자인을 수정해서 다시 재판매 용도로 사용 하시면 안되고 자료를 다른 사이트에 공개하실땐 출처나 링크를 달아야합니다.

      결론은 회사나 개인 디자인에 활용하시는건 아무 문제 없으십니다. ^^

  • 2013.07.07 11:22 신고

    좋은소스감사해요~^^활용해봐야겠어요~^^!

  • 복된장마비
    2013.11.12 13:56

    오~~ 잘되네요~~ 정말 감사합니다^^

  • 박미영
    2013.12.09 13:58

    소스를 퍼갈 수는 없을까요? 급한데 이걸 다 언제치나 ㅠㅠ 부탁드려요

  • 2014.01.27 14:35

    비밀댓글입니다

    • 2014.01.28 08:28 신고

      어이쿠..생각해보니까...마우스로 복사할수 없도록 설정했네요.
      우선 메일로 내용 보내드렸구요. 상단에 다운 버턴 추가했습니다.~

  • 퇴근못함ㅠㅠ
    2014.04.11 20:56

    혹시 배경화면을 클릭시 닫히고 오늘하루 보지 않기를 체크하여 닫을시 배경화면도안보이게 할 수있나요 ㅠㅠ

    전 다른건 다되는데 오늘하루를 체크 하고 닫으면 배경은 계속 보여서요 ㅠㅠ

    • 2014.04.14 08:16 신고

      흠 배경화면이 원래 페이지 화면을 말씀하시는거라면 그 방법은 저도 잘 모르겠네요. ㅜㅜ 도움못되드려서 죄송합니다.

  • 2014.05.08 17:56

    비밀댓글입니다

    • 2014.05.09 11:25 신고

      ^^ 상단에 다운버턴 만들어놓은걸 못보셨나봐요. 메일로 발송해드렸습닌다. 유용하게 사용해주세요.~

  • 2014.11.06 11:13 신고

    form태그 없이 동작시키는건 불가능한건가요? 자바스크립트는 정말 어렵네요ㅠ

    • 2014.11.10 13:27 신고

      폼태그 없이도 사용이 가능하세요. ^^ 다만 폼태그의 용도는 팝업을 끌수 있는 버턴을 만들기 위해서 입니다. 만약 없애신다면 자동으로 시간이 지난후 꺼질수 있도록 소스를 수정하셔야 합니다.

    • 2014.11.14 13:51 신고

      그렇군요..ㅎㅎ 늘 웹통님 블로그에서 좋은 정보 많이 알아갑니다.. 고맙습니다^^

    • 2014.11.14 16:59 신고

      ^^ 이번껀 도움이 별루 안된것 같아요. 혹시 막히시면 언제든지 댓글 남겨 주세요. 즐거운 주말되세요.~

  • gloria1215
    2016.06.07 16:49

    안녕하세요? 좋은 소스 공유해주셔서 감사합니다.
    이 팝업창에 동영상(유투브)를 띄워도 되겠지요?
    반응형웹의 메인화면에 동영상 이미지 클릭하면 팝업이 뜨게끔할려고하는데, 쉽지 않을 것 같네요..^^;

  • djseo
    2016.06.28 21:04

    소스 감사합니다.
    적용하니까.. 검은색 부분이 아애 쌔카맣게 되었는데 어떻게 수정하면 될까요?
    그리고 프레임들하고 겹치는 부분이 있는데 그누보드 사용하고 있는데 어느 파일에 적용해야 가장 먼저 출력될까요?
    z-index:10 도 1로 바꿔 보았는데 안되요.. ㅠ
    또.. 하루동안 안보이게 말고.. 1분동안 안보이게 바꾸고 싶어요..

    • 2016.06.29 16:34 신고

      안녕하세요.~

      배경 투명도가 적용안된것 같습니다.

      <style type="text/css">
      #divpop{position:absolute;left:0px;top:0px;width:100%;height:100%;z-index:10;background-color:#000000;filter:alpha

      (opacity=80);line-height:450px;vertical-align:middle;text-align:center;display:block;background-image:url(back_top.jpg)}

      </style>

      이부분에서 (opacity=80)인지 확인해 보시구요.

      겹치는 순서는 좀 복합적인 부분이라 전체적인 부분을 봐야 알 수 있습니다.

      그리고 날짜를 분으로 변경하려면 많은부분을 손봐야할것 같습니다.


      http://kin.naver.com/qna/detail.nhn?d1id=1&dirId=1040202&docId=104512180&qb=ZnVuY3Rpb24gc2V0X2Nvb2tpZSDsi5zqsIQg7KGw7KCV&enc=utf8&section=kin&rank=1&search_sort=0&spq=0&pid=S3LGaspySDCsscO5UCKsssssstR-320598&sid=NtLc2nTg9Q3EswC2K/1E8w%3D%3D

      이분이 설명한걸 참조하면 되실것 같아요.

  • 2016.11.07 09:53

    비밀댓글입니다

  • 개발하는쥬쥬
    2017.07.12 16:22

    아직사용전인데 자료 정리가 깔끔히 되어있어 너무 감사드립니다 적용해보고 말씀드릴게요

  • 2018.11.22 11:29

    비밀댓글입니다

  • 이유준
    2018.12.15 23:53

    알고있던 내용도 정리를 너무 잘해주셔서 더 잘 이해할 수 있었던것 같습니다ㅠㅠ 항상 감사합니다.

Designed by JB FACTORY