jQuery, Bootstrap을 사용하여,
그림과 같이 팝업창을 구현하는 기능은 아래와 같이 구현하면 됩니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>모달을 사용한 인라인 팝업 구현하기([하루동안 이 창을 열지않음] 기능 구현)</title>
<link href="../../Content/bootstrap.min.css" rel="stylesheet" />
<script src="../../Scripts/jquery-2.1.0.min.js"></script>
<script src="../../Scripts/bootstrap.min.js"></script>
</head>
<body>
<div class="modal fade" id="popup" tabindex="-1" role="dialog" aria-labelledby="popup-label" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true" id="btnPopupCloseX">×</button>
<h4 class="modal-title" id="popup-label">알립니다!!!</h4>
</div>
<div class="modal-body">
내용 들어오는 곳...
</div>
<div class="modal-footer">
<span class="pull-left checkbox">
<label>
<input type="checkbox" name="chkToday" id="chkToday">[하루동안 이 창을 열지않음]
</label>
</span>
<button type="button" class="btn btn-default" data-dismiss="modal" id="btnPopupClose">Close</button>
</div>
</div>
</div>
</div>
<script>
function getCookie(name) {
var Found = false
var start, end
var i = 0
while (i <= document.cookie.length) {
start = i
end = start + name.length
if (document.cookie.substring(start, end) == name) {
Found = true
break
}
i++
}
if (Found == true) {
start = end + 1
end = document.cookie.indexOf(";", start)
if (end < start)
end = document.cookie.length
return document.cookie.substring(start, end)
}
return ""
}
function setCookie(name, value, expiredays) {
var todayDate = new Date();
todayDate.setDate(todayDate.getDate() + expiredays);
document.cookie = name + "=" + escape(value) + "; path=/; expires=" + todayDate.toGMTString() + ";"
}
function openPopup() {
var eventCookie = getCookie("popup");
if (eventCookie != "no") {
$('#popup').modal();
}
}
function closeWin() {
if (document.getElementById("chkToday").checked) {
setCookie("popup", "no", 1); // 하루동안 쿠키 저장(popup 별칭으로...)
}
}
$(function () {
// 페이지 로드 완료시 팝업 출력
openPopup();
// 팝업 닫기 버튼 클릭시 체크박스 체크 후 팝업 종료
$("#btnPopupClose, #btnPopupCloseX").click(function () {
closeWin();
});
});
</script>
</body>
</html>