오늘 하루 안보기 팝업

오늘 하루 안보기 팝업

HTML

<main id="main">

<div id="popup_layer">

<div class="inner">

<a href="javascript:;" class="btn_close">X</a>

여기가 팝업 글 내용

<div class="cheack_box">

<label for="user_cheack">오늘하루 안보기</label>

<input id="user_cheack" type="checkbox">

</div>

</div>

</div>

<div class="dimd"></div>

</main>

CSS

.btn_open{ text-align: center; font-size:20px; display:inline-block; margin:0 auto; text-decoration: none;}

.dimd{ display:none; position: fixed; top:0; left:0; width: 100%; height: 100%; background: #000; opacity: 0.8; z-index:10;}

#popup_layer{ display:none; position: absolute; top:0; left:50%; margin-left:-400px; width:800px; background:#fff; z-index:11;}

#popup_layer .inner{ position: relative; padding: 50px 0; }

#popup_layer .inner .btn_close{ position: absolute; top:-60px; right: 0; font-size:40px; color:#fff; text-decoration: none;}

#popup_layer .inner .cheack_box{ position: absolute; bottom:-42px; left:0; width:100%; padding:10px 0; background:#000; text-align: right; }

#popup_layer .inner .cheack_box label{ color:#fff; font-size:14px;}

#popup_layer .inner .cheack_box input{ margin-right: 20px;}

SCRIPT

var _w;

var _btnOpen;

var _popupLayer;

var _popupDimd;

var _popupClose;

var _userCheack;

var _cookieCheack;

function init()

{

create();

addEvent();

if( _cookieCheack == undefined )

{

openPopup();

}

}

function create()

{

_w = $( window );

_btnOpen = $( ".btn_open" );

_popupLayer = $( "#popup_layer" );

_popupDimd = $( ".dimd" );

_popupClose = $( ".btn_close" );

_userCheack = $( "#user_cheack" );

_cookieCheack = $.cookie( "noCookie" );

}

function addEvent()

{

_btnOpen.on( "click", btnOpenClick );

_popupClose.on( "click", popupCloseClick );

_popupDimd.on( "click", popupCloseClick );

}

function popupCloseClick( $e )

{

if( _userCheack.is( ":checked" ))

{

$.cookie( "noCookie", "1", { expires:1, path: '/' });

}

closePopup();

}

function btnOpenClick( $e )

{

openPopup();

}

function openPopup()

{

var center = ( _w.height() - _popupLayer.height() ) / 2;

_popupDimd.css({ "display": "block" });

_popupLayer.css({

"display" : "block",

"top" : center

});

console.log( _cookieCheack );

if( _cookieCheack == "1" )

{

closePopup();

}

}

function closePopup()

{

_popupLayer.css({ "display" : "none" });

_popupDimd.css({ "display" : "none" });

}

예제샘플

http://ux.adqua.co.kr/ux/ixkfo86/test/popup/popup.html