홈페이지 접속 팝업창 , 오늘하루 띄우지 않기

차근차근/JAVA Script

홈페이지 접속 팝업창 , 오늘하루 띄우지 않기

예쁜꽃이피었으면 2015. 9. 8. 09:33

이렇게 함

[ 메인화면 jsp상단에 추가 ]

<div id="div_laypopup" align="center" style="display:none; border-width:2px; Z-INDEX: 201; POSITION: absolute;left:528px; top:40px; background-color:#000000;">

<img src="/public/img/popup/popup.jpg"><br/>

<input type="checkbox" name="close" value="OK" onclick="javascript:closeWin('div_laypopup', 1);"/>하루동안 이 창을 열지 않음

         

<input type="button" onclick="javascript:closeWin1('div_laypopup');" value="닫기" >

</div>

[ 자바스크립트 ]

openWin('div_laypopup');

//창열기

function openWin( winName ) {

var blnCookie = getCookie( winName );

var obj = eval( "window." + winName );

if( !blnCookie ) {

obj.style.display = "block";

}

// 창닫기

function closeWin(winName, expiredays) {

setCookie( winName, "done" , expiredays);

var obj = eval( "window." + winName );

obj.style.display = "none";

}

function closeWin1(winName){

var obj = eval( "window." + winName );

obj.style.display = "none";

}

// 쿠키 가져오기

function getCookie( name ) {

var nameOfCookie = name + "=";

var x = 0;

while ( x <= document.cookie.length )

{

var y = (x+nameOfCookie.length);

if ( document.cookie.substring( x, y ) == nameOfCookie ) {

if ( (endOfCookie=document.cookie.indexOf( ";", y )) == -1 )

endOfCookie = document.cookie.length;

return unescape( document.cookie.substring( y, endOfCookie ) );

}

x = document.cookie.indexOf( " ", x ) + 1;

if ( x == 0 )

break;

}

return "";

}

// 24시간 기준 쿠키 설정하기

// expiredays 후의 클릭한 시간까지 쿠키 설정

function setCookie( name, value, expiredays ) {

var todayDate = new Date();

todayDate.setDate( todayDate.getDate() + expiredays );

document.cookie = name + "=" + escape( value ) + "; path=/; expires=" + todayDate.toGMTString() + ";"

}

=======================================================

이미지 클릭하면 팝업창 뜨고 닫기누르면 새창으로 특정 사이트 열어주기

[ jsp 상단 ]

<div id="div_laypopup" align="center" style="display:none; border-width:2px; Z-INDEX: 201; POSITION: absolute;left:528px; top:40px; background-color:#000000;">

<img src="/public/goodjob/img/popup/cybercampuspopup.jpg"><br/>

<input type="button" onclick="javascript:closeWin1('div_laypopup');" value="닫기" >

</div>

[ jsp 화면일부]

<a href="#" onClick="javascript:openWin('div_laypopup');"><img src="/bg-main-headline.jpg" width="1683" height="249" alt="">바로가기</a>

[ 자바스크립트 ]

//창열기

function openWin( winName ) {

var obj = eval( "window." + winName );

// if( !blnCookie ) {

obj.style.display = "block";

// }

}

//닫기 누르면 팝업닫고 새창열림

function closeWin1(winName){

var obj = eval( "window." + winName );

window.open("http://www.naver.com/","_blank");

obj.style.display = "none";

}

====================================================

이 팝업창이 떠야 할 곳은 두곳이었는데

하나는 메뉴에 있고 하나는 메인 헤더 이미지에서 팝업창이 떠야 했다.

두 곳에 소스를 적용하고 실행해 보니 실행이 되지 않았다..

음.. 메뉴의 소스를 지우고 메인소스만을 살려놨더니.

메인화면에서 메뉴팝업과 헤더이미지 팝업이 모두 실행되었다.

그러나 메인화면이 아닌 다른 화면에서 메뉴팝업을 실행을 해보니 메뉴팝업이 실행되지 않았다.

그래서 메뉴팝업 페이지에 위의 소스를 넣고 메인화면에서는 제거 했더니 작동에 이상이 없다.

(타일 jsp ? 라서 그렇다고 봐야하나..)

레이어 팝업 - 닫기&오늘 하루 열지 않기

http://www.ssanweb.com/bbs/board.php?bo_table=menual&wr_id=73

쿠기를 이용한 오늘 하루 이 창을 열지않음 이용하기

http://hoonchul.com/javascript/%EC%BF%A0%EA%B8%B0%EB%A5%BC-%EC%9D%B4%EC%9A%A9%ED%95%9C-%EC%98%A4%EB%8A%98-%ED%95%98%EB%A3%A8-%EC%9D%B4-%EC%B0%BD%EC%9D%84-%EC%97%B4%EC%A7%80%EC%95%8A%EC%9D%8C-%EC%9D%B4%EC%9A%A9%ED%95%98%EA%B8%B0/

자바스크립트 하루동안 팝업창 열지 않기

http://wjkim-info.tistory.com/199

소스적은것.js

http://JQuery와 JQuery-ui, JQuery.Cookie를 이용한 팝업창 표시하기

http://jhansol.tistory.com/123

이 소스는 제 수강생의 요청으로 적흥적으로 만든 것이었습니다. 자바스크립트에 대해 잘 모르는 친구라 어떻게하면 이 친구가 쉽게 적용할 수 있을까 궁리끝에 JQuery와 JQuery-ui, 그리고 JQuery.Cookie 플러그인을 이용한 것입니다.

먼저 www.jqeury.org 사이트에서 JQuery Core와 JQuery UI, JQuery.Cookie를 다운로드 받아 사이트의 스크립트 폴더에 업로드합니다.

그리고 해더에 아래와 같이 포함시킵니다.

<script src="wp-includes/js/jquery/jquery-1.9.1.min.js"></script>
<script src="wp-includes/js/jquery/jquery-ui-1.10.2.custom.min.js"></script>
<script src="wp-includes/js/jquery/jquery.cookie.js"></script>

그리고 그 아래에 아래와 같이 팝업창을 드래그가 가능하도록 설정하고, 쿠키 정보를 검사하여 팝업창을 표시하거나 숨기는 함수, 그리고 닫기 링크를 클릭하여 닫을 수 있는 함수의 기능과 오늘 하루동안 보이지 않도록 하는 함수를 정의하여 삽입합니다.

<script>
/*문서로딩이 완료되었을 때 실행되는 부분
팝업창이 드래그가능하도록 설정하는기능과 쿠키정보를 이용하여 팝업창이 보이거나 보이지않도록하는 기능설정*/
$(document).ready( function() {
$("#popup").draggable(); // 팝업창 드래그 가능하도록 설정
if( $.cookie("show_popup") == "false" ) close_popup(); // show_popup의 값이 false이면 팝업창을 닫도록한다
else $("#popup").show();// 그렇지않으면 팝업창이 표시되도록한다
} )
/* 팝업창을 보이지 않도록하는 함수(이 함수는 닫기링크를 클릭했을 때, 오늘하루 보이지 않음링크를 클릭했을 때 호출되는 함수) */
function close_popup() {
$("#popup").hide();
}
/*오늘하루 보이지 않음 링크를 클릭했을 때 호출되는 함수 show_popup 쿠키의 값을 false로 지정하고 유효기간을 하루 뒤로설정하고 팝업창을 닫는다*/
function popup_hide_cookie() {
today = new Date();
$.cookie( "show_popup", "false", { path: "/", expires : 1 } );
close_popup();
}
</script>

그리고 아래와 같이 body 영역의 적당한 위치에 div 태그를 이용하여 레이어를 만들어 팝업창을 삽입합니다.

<!-- 팝업창 태그시작 -->
<div id="popup"><!--팝업창 css id지정-->
<img src="popup/w3-a.jpg" id="popup_image">
<!--팝업창을 컨트롤하는 링크가 삽입된 부분(header.php에 있는 자바스크립트 호출)시작-->
<p id="popup_control"><a href="javascript:popup_hide_cookie()">오늘 하루 보이지 않음</a> <a href="javascript:close_popup()">닫기</a></p>
<!--팝업창을 컨트롤하는 링크가 삽입된 부분(header.php에 있는 자바스크립트 호출)끝-->
</div>
<!-- 팝업창 태그 끝 -->

그리고 마지막으로 위 팝업창의 위치와 모양을 설정하기 위한 CSS 스타일을 페이지와 관련된 css 파일에 추가한다.

/*팝업창 css시작*/
#popup {
position: absolute;
top: 200px;
left: 300px;
width: 500px;
height: 580px;
padding: 0;
z-index: 900;
}
/*팝업 컨트롤 p태그css(닫기 오늘하루 보이지 않음 부분 css)시작*/
#popup_control {
background-color: white;
text-align: right;
font-size: 9pt;
padding: 5px;
margin: 0;
width: 100%;
}
/*팝업 컨트롤 p태그css(닫기 오늘하루 보이지 않음 부분 css)끝*/
/*팝업창 css끝*/

[JQUERY]오늘 하루 팝업 열지 않기

http://madebykaus.com/?p=420

팝업관련된 기능이 있는 홈페이지에서는 항상쓰는 기본적인 기능이다.

그냥 매번 다쓰는거 같다.

요즘은 레이어를 이용해서 팝업을 하지만 이전에는 새창을 띄우는 팝업을 주로쓰는데 거기에서 주로쓰며

코드 수정을 통해서 레이어를 통한 팝업에도 적용이 가능하다.

1.peven.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE html>
<html>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=9">
	<head>
	<!-- 레이어팝업시작 -->
	<script language='javascript'>
	function setCookie(name, value, expiredays){
		var todayDate = new Date();
			todayDate.setDate (todayDate.getDate() + expiredays);
			document.cookie = name + "=" + escape(value) + "; path=/; expires=" + todayDate.toGMTString() + ";";
		}
 
		function closePop(){
			if (document.frm.pop.checked){
			setCookie("popname", "done", 1);
		}
		self.close();
	}
	</script>
	</head>
	<body>
		<form name="frm">
			<div class="PopupWindow">
				<div class="PopupButton">
					<a onClick="opener.location.href='http://naver.co.kr'; self.close();" target="_blank"><img src="../Reports/image/updatebutton.png" style="width:120px; height:30px;"></a>
				</div>
				<div class="PopupBottom"> 
					<div class="PopupText">오늘 하루만 보기</div>
					<input class="PopupCheck" type='checkbox' name='pop' onClick='closePop()'>
				</div>
			</div>
		</form>
	</body>
</html>

2.index.php

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
jQuery(document).ready(function($) {
	pevent();
});
 
function pevent(){
	function getCookie(name){
		var nameOfCookie = name + "=";
		var x = 0;
		while (x <= document.cookie.length){
			var y = (x + nameOfCookie.length);
			if (document.cookie.substring(x, y) == nameOfCookie){
			if ((endOfCookie = document.cookie.indexOf(";", y)) == -1){
			endOfCookie = document.cookie.length;
			}
			return unescape (document.cookie.substring(y, endOfCookie));
			}
			x = document.cookie.indexOf (" ", x) + 1;
			if (x == 0) break;
		}
		return "";
	}
	if (getCookie("popname") != "done"){
		var popUrl = "./event/pevent.php"; //팝업창에 출력될 페이지 URL
		var popOption = "width=370, height=360, resizable=no, scrollbars=no, status=no;";    //팝업창 옵션(optoin)
		window.open(popUrl,"",popOption);
	}
}

[javascript] 오늘 하루동안 이 창을 열지 않음 ( 팝업,레이어팝업 )

http://rocabilly.tistory.com/98

<div_laypopup>

1. 처리 방법

1) 프로그램 소스

view plaincopy to clipboardprint?
// (오늘) 하루동안 열지 않기(소스)  
<div id="div_laypopup" align="center" style="display:none;border-width:0px;Z-INDEX: 201; POSITION: absolute;left:528px; top:640px;">  
    <input type="checkbox" name="close" value="OK" onclick="javascript:closeWin('div_laypopup', 1);"/>하루동안 이 창을 열지 않음  
    <!-- <input type="checkbox" name="close" value="OK" onclick="javascript:closeWinAt00('div_laypopup', 1);"/>오늘만 이 창을 열지 않음 -->  
 </div>  
   
 <script type="text/javascript">  
 <!--  
    openWin('div_laypopup');  
 -->  
 </script>  

2) 자바스크립트 소스(js 파일)

- 일자별 쿠키설정이 만 24시간 기준과 통념적 기준, 두가지 형태로 경우에 따라 처리

view plaincopy to clipboardprint?
<script language="javascript" type="text/javascript">  
<!--  
  
// 창열기  
function openWin( winName ) {  
   var blnCookie    = getCookie( winName );  
   var obj = eval( "window." + winName );  
   if( !blnCookie ) {  
       obj.style.display = "block";  
   }  
}  
  
// 창닫기  
function closeWin(winName, expiredays) {   
   setCookie( winName, "done" , expiredays);   
   var obj = eval( "window." + winName );  
   obj.style.display = "none";  
}  
function closeWinAt00(winName, expiredays) {   
   setCookieAt00( winName, "done" , expiredays);   
   var obj = eval( "window." + winName );  
   obj.style.display = "none";  
}  
  
// 쿠키 가져오기  
function getCookie( name ) {  
   var nameOfCookie = name + "=";  
   var x = 0;  
   while ( x <= document.cookie.length )  
   {  
       var y = (x+nameOfCookie.length);  
       if ( document.cookie.substring( x, y ) == nameOfCookie ) {  
           if ( (endOfCookie=document.cookie.indexOf( ";", y )) == -1 )  
               endOfCookie = document.cookie.length;  
           return unescape( document.cookie.substring( y, endOfCookie ) );  
       }  
       x = document.cookie.indexOf( " ", x ) + 1;  
       if ( x == 0 )  
           break;  
   }  
   return "";  
}  
  
  
// 24시간 기준 쿠키 설정하기  
// expiredays 후의 클릭한 시간까지 쿠키 설정  
function setCookie( name, value, expiredays ) {   
   var todayDate = new Date();   
   todayDate.setDate( todayDate.getDate() + expiredays );   
   document.cookie = name + "=" + escape( value ) + "; path=/; expires=" + todayDate.toGMTString() + ";"   
}  
  
// 00:00 시 기준 쿠키 설정하기  
// expiredays 의 새벽  00:00:00 까지 쿠키 설정  
function setCookieAt00( name, value, expiredays ) {   
    var todayDate = new Date();   
    todayDate = new Date(parseInt(todayDate.getTime() / 86400000) * 86400000 + 54000000);  
    if ( todayDate > new Date() )  
    {  
    expiredays = expiredays - 1;  
    }  
    todayDate.setDate( todayDate.getDate() + expiredays );   
     document.cookie = name + "=" + escape( value ) + "; path=/; expires=" + todayDate.toGMTString() + ";"   
  }  
  
-->  
</script>  

[javascript]window open 팝업창 띄우기&하루동안 보지않기&2개 띄우기

http://nabeom.egloos.com/v/10188168

팝업이 열리길 원하는 창에 다음과 같이 적는다.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
<title>팝업띄우기</title>
<script language="JavaScript">
<!--
function getCookie(name) {
var nameOfCookie = name + "=";
var x = 0

while ( x <= document.cookie.length ) {
var y = (x+nameOfCookie.length);
if ( document.cookie.substring( x, y ) == nameOfCookie ) {
if ( (endOfCookie=document.cookie.indexOf( ";",y )) == -1 )
endOfCookie = document.cookie.length;
return unescape( document.cookie.substring(y, endOfCookie ) );
}
x = document.cookie.indexOf( " ", x ) + 1;
if ( x == 0 )
break;
}
return "";
}

function openWin() {
if (getCookie("name1") != "done") {
window.open("popup.html","name1","width=300, height=400, top=0,left=0");
}

if (getCookie("name2") != "done") {
window.open("popup2.html","name2","width=400, height=520, top=0,left=310");
}
}
// -->
</script>
</head>

팝업으로 띄워질 창(하루만 열기) popup.html

<html>
<head>
<title>팝업으로 띄워지는 창</title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
<script language="JavaScript">
<!--
function setCookie(name,value,expiredays) {
var todayDate = new Date();
todayDate.setDate(todayDate.getDate() + expiredays);
document.cookie = name + "=" + escape( value ) + "; path=/; expires=" + todayDate.toGMTString() + ";"
}

function closeWin() {
if(document.checkClose.name1.checked == true) {
setCookie("name1", "done" ,1);
}
self.close();
}
//-->
</script>

</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table border="0" width="300" height="400" cellpadding="0" cellspacing="0">
<form name="checkClose">
<tr>
    <td colspan="2" height="377">
<a href="이동할 주소" target="_blank"><img src="images/popup01.gif" border="0" alt="클릭"></a></td>
</tr>
<tr>
    <td width="250" height="23" valign="top" bgcolor="#000000">
<input type="checkbox" name="name1" onfocus="this.blur()">오늘 하루 이 창 띄우지 않음</td>
    <td width="50" valign="bottom" bgcolor="#000000">
<a href="#" _onxclick="closeWin()">[닫기]</a>
    </td>
</tr>
</form>
</table>
</body>
</html>

name1, name2

: 팝업이 열리지 않게 되었는지를 확인하기 위한 이름. 팝업이 열릴 창과 팝업으로 열릴 창이 같은 이름을 사용해야 한다.

name1, name2

: 팝업창의 이름. 이름을 지정해 주면 새로고침 등을 할 때 여러개의 창이 열리지 않는다.

onload="openWin();" : body 태그 안에 이것을 적어줘야 팝업창이 열린다.

checkClose: 자바스크립트 소스와 체크박스 폼태크의 이름을 같은 것으로 해야한다.

name1: 체크박스 이름

1 : 창 띄우지 않기가 적용되는 기간. 1이므로 체크하고 창을 닫으면 하루동안 창이 다시 열리지 않는다.

_onxclick="closeWin()" : 클릭 시 오늘하루 열지않기가 적용되게 하기 위해 필요. 자바소스에 적은 펑션명을 적어준다.

------------------------------------------------------

/*
width=800:팝업창의 넓이
height=600:팝업창의 높이
top=0:팝업창이 뜰 위치 위기준으로
left=0:팝업창이 뜰 위치 좌측기준으로
resizable=1:창크기조정가능
scrollbars=no:스크롤바
menubar=1:메뉴
toolbar=1:메뉴아이콘
location=1:제목표시줄

새창띄우는 팝업창 소스정리

http://www.master4u.net/bbs/view.php?id=banner&no=295

링크 #1: http://www.yesmoa.co.kr/ysboard/bbs/board.php?bo_table=tmx_02b02&wr_id=83

새창띄우는 팝업창 소스정리            작성일 : 09-02-12 18:07
http://www.yesmoa.co.kr/ysboard/bbs/board.php?bo_table=tmx_02b02&wr_id=83

팝업창 옵션
----------------------------------------

no, 1을 사용
width=800 : 팝업창의 넓이
height=600 : 팝업창의 높이
top=0 : 팝업창이 뜰 위치
left=0 : 팝업창이 뜰 위치
resizable=1 : 창크기 조정가능
scrollbars=1 : 스크롤바
menubar=1 : 메뉴
toolbar=1 : 메뉴아이콘
location=1 : 제목표시줄
directories=1 : 연결버튼(핫메일 등)
status=1 : 하단의 상태바

■ 입장시 팝업창 띄우기
----------------------------------------

<head>
<title>입장시 자동으로 팝업창 띄우기</title>

<script language="javascript">

</script>
</head>
<body onLoad="OpenWindow()">


또는


<body onload="window.open('insa-hi.html', 'new', 'toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no, resizable=no,width=470,height=340')">


■ 퇴장시 팝업창 띄우기
----------------------------------------


<body onunload="popup();">
<script language=javascript>

</script>


또는


<body onunload="window.open('testby.html')">


■ 클릭을 하면 팝업창이 뜨는 스크립트
----------------------------------------

<title>링크 클릭시 팝업창 띄우기</title>


<script language="javascript">

</script>
</head>

<body>
<br>
<center>
<a href="javascript:OpenWindow('insa-hi.html','470','340')">여기를 누르면 새로운 창을 띄웁니다.</a>
</center>


</body>

■ 입장시와 퇴장시에 모두 팝업창 띄우기
----------------------------------------



<body onunload="popup();">
<scRIPT LANGUAGE="Javascript">

</scRIPT>


<script language=javascript>

</script>


----------------------------------------------------------------------------------------

■ 메뉴바나 상태바가 없는 그러한 작은 창이 뜨게 하는 방법은 다음과 같다.

자바스크립터의 window.open이라는 명령어를 주죠...^^

윈도우제어의 기본적인 틀은.. <script>window.open(띄우고자하는주소)</script>

이런꼴입니다...
여기에 옵션을 줄수 있습니다..

menubar yes/no : 윈도우의 menubar 표시여부
toolbar yes/no : 윈도우의 toolbar 표시여부
location yes/no : 윈도우의 location box 표시여부
directories yes/no : 윈도우의 directory button들의 출력여부
status yes/no : 윈도우의 상태표시줄 표시여부
scrollbars yes/no : 윈도우의 가로 세로 scrollbar 표시여부
resizable yes/no : 윈도우의 크기가 조정될 수 있는 지 결정
width : 윈도우의 너비 결정
height : 윈도우의 높이 결정

이런식이죠....
만약 창의 크기를 가로 350픽셀 세로 400픽셀 스크롤바를 주고 메뉴바를 주게해서 띄울려면

<script>window.open("주소","small",'width=350,height=400,scrollbars=yes,menubar=yes')</script> 이런식으루 하면 되는거죠...^^

또한 자동팝업이 아니라 링크를 클릭하면 새창이 뜨게 할려면
<a href="#" onclick="window.open('주소','small','width=350,height=400,scrollbars=yes,menubar=yes')">클릭</a>
이렇게 하시면 됩니다. 이때 중간에 "small"은 꼭 붙이시길..

자바스크립트 팝업창 띄우기

http://chs02.tistory.com/162

http://web-nara.com/bbs/board.php?bo_table=bo_f_3&wr_id=114&page=6

사이트접속시 나타나는 팝업창

저작자표시 비영리

'차근차근 > JAVA Script' 카테고리의 다른 글

[JS]자바스크립트로 user agent를 통해 모바일 인식하기 (0)	2015.10.27
ie 버전에 따라 팝업창 띄워주기 \| 호환성보기 설정 알아보기 (0)	2015.09.09
jQuery v2.1.4 , ie8 , addEventListener (0)	2015.08.21
nav , ie8 (0)	2015.08.21
테이블 병합 및 필요없는 데이터 안 보이게 하기 (0)	2015.06.09

현재글홈페이지 접속 팝업창 , 오늘하루 띄우지 않기

개인 공부를 위한 블로그입니다.

Django, AWS, 패캠챌린지, vuejs, 패스트캠퍼스후기, 백준, MYSQL, nginx, 인증문자, 직장인자기계발, docker, ubuntu, 한 번에 끝내는 코딩테스트 369 Java편 초격차 패키지 Online., Gunicorn, 자바, 10953, 직장인인강, 10952, 10951, 패스트캠퍼스,

Today :
Yesterday :

옵션명	기능
height	높이 조절
width	폭 조절
location	주소표시줄 표기
menubar	메뉴바 표기
resizable	사이즈 조절 가능 여부
scrollbars	스크롤바 유무
toolbar	툴바 표기 유무
left, top	왼쪽, 오른쪽 위치 조절

내 인생에도 예쁜 꽃이 피었으면 좋겠다