yonghee

<style>
.__popup {position:fixed;z-index:300;display:none;}
.__popup .area {background:#fff;border:1px solid #ddd;padding:10px;font-size:14px;line-height:1.5em;max-width:100%;overflow-y:auto;}
.__popup .area * {max-width:100%;height:auto !important;}
.__popup .bot {background:#1f4bb4;text-align:right;padding:7px 10px;}
.__popup .bot > * {display:inline-block;vertical-align:middle;color:#fff;font-size:14px;}
.__popup .bot button {border:none;background:none;color:#fff;}
.__popup .bot label {margin-right:20px;}
.__popup .bot label input {vertical-align:middle;}

@media all and (max-width:1000px){
	.__popup {left:0 !important;top:0 !important;max-width:100% !important}
	.__popup .area {box-sizing:border-box;font-size:13px;max-height:80vh !important;}
	.__popup .bot {padding:5px 10px;}
	.__popup .bot > * {font-size:13px;}
}
</style>



<script>
//cookie 플러그인, jquery, jquery ui 필요

var popup = {
	init : function(){
		if($('.__popup').length > 0){
			this.action();
		}
	},
	action : function(){
		var a = $('.__popup');
		var close = a.find('.close');
		var spd = 500;

		a.draggable();

		a.each(function(i){
			var id = $(this).attr('id');
			if($.cookie(id)!='none'){
				$('#'+id).delay(i*300).fadeIn(spd);
			}
		});

		close.on('click',function(){
			var par = $(this).closest('.__popup');
			var id = par.attr('id');

			if(par.find('.chk').is(':checked')){
				$.cookie(id,'none',{expires:1});
			}

			par.fadeOut(spd);
		});

	}
}
</script>

<aside class="__popup" style="left:30px;top:30px;" id="pop1"><?//유니크한 ID값이 필요합니다?>
	<div class="area" style="width:500px;"><?//높이 값을 조절하면 높이에 따라 자동으로 y스크롤이 생깁니다.?>
		<img src="http://placehold.it/500x300" alt="이미지 설명글"/><br/>
		내용내용
	</div>
	<div class="bot">
		<label><input type="checkbox" class="chk"> <span>오늘하루 열지 않음</span></label>
		<button type="button" class="close">[닫기]</button>
	</div>
</aside>
<aside class="__popup" style="left:600px;top:30px;" id="pop2"><?//유니크한 ID값이 필요합니다?>
	<div class="area" style="width:500px;height:300px;"><?//높이 값을 조절하면 높이에 따라 자동으로 y스크롤이 생깁니다.?>
		<img src="http://placehold.it/500x200" alt="이미지 설명글"/><br/>
		내용내용<br/>
		내용내용<br/>
		내용내용<br/>
		내용내용<br/>
		내용내용<br/>
		내용내용<br/>
		내용내용<br/>
		내용내용<br/>
		내용내용
	</div>
	<div class="bot">
		<label><input type="checkbox" class="chk"> <span>오늘하루 열지 않음</span></label>
		<button type="button" class="close">[닫기]</button>
	</div>
</aside>
<script>popup.init();</script>