메뉴 보이기
Profile
이온디

2013.08.09

Script

전체화면 레이어 팝업 소스

조회 수 12007 추천 수 0

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

 

 

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

 

 

 

 

 

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>

Profile
7
Lv
이온디

이온디 홈페이지는 간결하며,

 손쉽게 수정할 수 있습니다.

0개의 댓글

에디터
번호 제목 날짜 조회 수
공지 [웹표준] 코딩 배울 수 있는 사이트 모음(HTML/CSS/JS/IMG/PHP) 2018.01.03 99
공지 [jQuery] jQuery를 배울수 있는 동네들입니다. 2013.08.09 19176
공지 [미분류] 관련 링크 2010.05.23 33743
139 [jQuery] 왼쪽에 숨겨진 레이어를 보여주자 2013.08.09 4251
[Script] 전체화면 레이어 팝업 소스 2013.08.09 12007
137 [웹폰트] Daum font로 Google Font API 따라잡기 2013.08.09 4050
136 [Script] News Ticker - 한줄 전광판, 한줄씩 올라가는 스크립트, 뉴스티커 2013.08.07 5732
135 [웹폰트] 구글 웹폰트 서비스 이용하기 2013.08.06 4522
134 [웹접근성] 웹 접근성 이슈 2013.08.06 5118
133 [HTML5] IE보완 - 조건부 주석 2013.08.06 4850
132 [웹접근성] 웹접근성이란 2013.08.06 3842
131 [HTML5] img style 속성 2013.03.12 5894
130 [Meta] Meta Tag(메타태그) 사용법 2013.03.05 6850
129 [부트스트랩] #2 부트스트랩의 특징 1 2013.03.04 5645
128 [부트스트랩] #1 부트스트랩이란? 2013.03.01 4089
127 [HTML5] HTML5 시멘틱 구조 태그 2013.02.28 4667
126 [부트스트랩] 부트스트랩의 아이콘 지원 브라우저 2013.02.25 3695
125 [부트스트랩] 기본 부트스트랩 템플릿 2013.02.24 4026
124 [PHP] 쿠키를 굽자 2013.02.22 3519
123 [Script] 자바스크립트로 CSS 불러오기 2013.02.22 4522
122 [UI] jquery menu slide 2012.12.16 9008
121 [Script] 로그인창 띄우기 2012.12.14 4686