jquery+LayerPopUp+alert+confirm

Notice
Recent Posts
Recent Comments
Link
« 2025/01 »
일	월	화	수	목	금	토
			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
Tags more
Archives
Today
Total
관리 메뉴
ふたりで

jquery+LayerPopUp+alert+confirm 본문

javascript
jquery+LayerPopUp+alert+confirm

graykang 2023. 2. 17. 13:40
728x90
SMALL
브라우저 자체에서 제공되는 alert(), confirm() 대신 jquery를 활용한 LayerPopUp으로 처리하기.
 <!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
<script src="https://code.jquery.com/jquery-3.6.1.slim.min.js" integrity="sha256-w8CvhFs7iHNVUtnSP0YKEg00p9Ih13rlL9zGqvLdePA=" crossorigin="anonymous">
</script>
<style>
	/* 전역 css */
	.hidden {display: none !important;}
	/* LayerPopup 용 기본 css*/
	.ui-menu .ui-state-focus, .ui-menu .ui-state-active {margin:0 !important;}
	.modal_bg{position:fixed;z-index:10000;left:0;top:0;width:100%;height:100%;min-height:800px;background:rgba(0,0,0,.7);}
	.popup{position:fixed;visibility:hidden;z-index:10001;left:50%;top:-9999px;border-radius:5px;background:#f9f9f9;box-shadow:0 0 20px #555;}
	.popup.s260{width:260px;}
	.popup.s400{width:400px;}
	.popup.s490{width:490px;}
	.popup.s520{width:520px;}
	.popup.s560{width:560px;}
	.popup.s620{width:620px;}
	.popup.s700{width:700px;}
	.popup.s750{width:750px;}
	.popup.s760{width:760px;}
	.popup.s820{width:820px;}
	.popup.s1000{width:1000px;}
	.popup .pop_header{margin-top:4px;height:45px;line-height:45px;font-size:18px;font-weight:bold;border-radius:5px 5px 0 0;background:#f1f3f4;border-bottom:1px solid #cccfd3;}
	.popup .pop_container{padding:20px; background:#fff; border-radius:0 0 5px 5px;}
	.popup .pop_container .customer_tab:first-child {margin-top:20px;}
	.popup .pop_con_scroll{padding-bottom:0 !important;max-height:500px;overflow-y:auto;}
	.popup .pop_con_scroll .foot_btn{padding-bottom:25px;}
	.popup .popup_close{overflow:hidden;text-indent:-9999px;width:49px;height:49px;display:block;z-index:3200;position:absolute;right:0;top:0;cursor:pointer;background:url(images/btn_pop_close.png) no-repeat 50% 50%;}
	.popup .txt_dialog{text-align:center;padding:25px 0 25px 0;font-size:16px;color:#333;line-height:20px;font-weight:bold;}
	.popup .foot_btn{font-size:0;line-height:0;padding-top:20px;text-align:center;}
	.popup .btn_n{display:inline-block;width:100px;height:38px;line-height:38px;font-size:14px;font-weight:bold;text-align:center;color:#fff;border-radius:4px;border-bottom:2px solid #eee;font-size:14px; padding:0;}
	.popup .foot_btn .btn_n + .btn_n {margin-left:10px;}
	.popup .bg_red{border-color:#d52929;background:#fb3939;}
	.popup .bg_orange{border-color:#bf8053;background:#fd9850;}
	.popup .bg_gray{border-color:#727272;background:#8e8e94;}
	.popup .bg_blue {
		border-color: #228be6;
		background: #228be6;
	}
	.ajax_loader{position:relative;width:50px;height:50px;margin:0 auto;}
	.ajax_loader .circularG{position:absolute;background-color:#FB3939;width:11px;height:11px;-moz-border-radius:8px;-moz-animation-name:bounce_circularG;-moz-animation-duration:1.04s;-moz-animation-iteration-count:infinite;-moz-animation-direction:normal;-webkit-border-radius:8px;-webkit-animation-name:bounce_circularG;-webkit-animation-duration:1.04s;-webkit-animation-iteration-count:infinite;-webkit-animation-direction:normal;-ms-border-radius:8px;-ms-animation-name:bounce_circularG;-ms-animation-duration:1.04s;-ms-animation-iteration-count:infinite;-ms-animation-direction:normal;-o-border-radius:8px;-o-animation-name:bounce_circularG;-o-animation-duration:1.04s;-o-animation-iteration-count:infinite;-o-animation-direction:normal;border-radius:8px;animation-name:bounce_circularG;animation-duration:1.04s;animation-iteration-count:infinite;animation-direction:normal;}
	.ajax_loader #circularG_1{left:0;top:20px;-moz-animation-delay:0.39s;-webkit-animation-delay:0.39s;-ms-animation-delay:0.39s;-o-animation-delay:0.39s;animation-delay:0.39s;}
	.ajax_loader #circularG_2{left:5px;top:5px;-moz-animation-delay:0.52s;-webkit-animation-delay:0.52s;-ms-animation-delay:0.52s;-o-animation-delay:0.52s;animation-delay:0.52s;}
	.ajax_loader #circularG_3{top:0;left:20px;-moz-animation-delay:0.65s;-webkit-animation-delay:0.65s;-ms-animation-delay:0.65s;-o-animation-delay:0.65s;animation-delay:0.65s;}
	.ajax_loader #circularG_4{right:5px;top:5px;-moz-animation-delay:0.78s;-webkit-animation-delay:0.78s;-ms-animation-delay:0.78s;-o-animation-delay:0.78s;animation-delay:0.78s;}
	.ajax_loader #circularG_5{right:0;top:20px;-moz-animation-delay:0.91s;-webkit-animation-delay:0.91s;-ms-animation-delay:0.91s;-o-animation-delay:0.91s;animation-delay:0.91s;}
	.ajax_loader #circularG_6{right:5px;bottom:5px;-moz-animation-delay:1.04s;-webkit-animation-delay:1.04s;-ms-animation-delay:1.04s;-o-animation-delay:1.04s;animation-delay:1.04s;}
	.ajax_loader #circularG_7{left:20px;bottom:0;-moz-animation-delay:1.17s;-webkit-animation-delay:1.17s;-ms-animation-delay:1.17s;-o-animation-delay:1.17s;animation-delay:1.17s;}
	.ajax_loader #circularG_8{left:5px;bottom:5px;-moz-animation-delay:1.3s;-webkit-animation-delay:1.3s;-ms-animation-delay:1.3s;-o-animation-delay:1.3s;animation-delay:1.3s;}
</style>
</head>
<body>
<input type="button" id="alertBtn" value="알럿"/>
<input type="button" id="confirmBtn" value="컨펌"/>
<!--LayerPopup 용 기본 css alert 팝업 화면 -->
		<div class=" popup s400 alert_popup" draggable="false" style="width:auto;">
			<div class="pop_header"><q>&nbsp;<img src="${ctx }/common/img/favicon-tg.png"/>알림</q></div>
			<div class="pop_container">
				<div class="txt_dialog message"></div>
				<p class="foot_btn">
					<a href="#" class="btn_n bg_blue modal_alert_confirm">확인</a>
				</p>
			</div>
			<input type= "hidden" style="cursor: pointer;" class="icon-closepopup_close modal_alert_close" value="닫기">
		</div>
<!--LayerPopup 용 기본 css confirm 팝업 화면-->
		<div class="popup s400 confirm_popup" draggable="false">
			<div class="pop_header">&nbsp;<img src="${ctx }/common/img/favicon-tg.png"/>알림</div>
			<div class="pop_container">
				<div class="txt_dialog message"></div>
				<p class="foot_btn">
					<a href="#" class="btn_n bg_blue modal_alert_confirm">확인</a>
					<a href="#" class="btn_n bg_gray modal_alert_close">취소</a>
				</p>
			</div>
<!-- 			<a href="#" class="popup_close modal_alert_close">닫기</a> -->
		</div>
<!--LayerPopup 용 기본 css 상태 진행중 팝업 화면 -->
		<div class="popup s400 status_progress_popup" draggable="true">
			<div class="pop_header">&nbsp;<img src="${ctx }/common/img/favicon-tg.png"/>알림</div>
			<div class="pop_container">
				<div class="txt_dialog">
					<div class="ajax_loader"><div id="circularG_1" class="circularG"></div><div id="circularG_2" class="circularG"></div><div id="circularG_3" class="circularG"></div><div id="circularG_4" class="circularG"></div><div id="circularG_5" class="circularG"></div><div id="circularG_6" class="circularG"></div><div id="circularG_7" class="circularG"></div><div id="circularG_8" class="circularG"></div></div>
					<p class="txt_dialog3 message"></p>
				</div>
			</div>
<!-- 			<a href="#" class="popup_close modal_progress_close">닫기</a> -->
		</div>

</body>
<script type="text/javascript">
//alert, confirm layer popup
var LayerPopup =
{
	target :
	{
			alert : $(".popup.alert_popup"),
			confirm : $(".popup.confirm_popup"),
			progress : $(".popup.status_progress_popup")
	},
	
	//overflow : $('body').css('overflow'),

	show : function( target, mode, msg )
	{
			// target을 초기화 후 다시 셋팅
			var cloneObj;
			if( mode == "alert" ) cloneObj = LayerPopup.target.alert.clone();
			if( mode == "confirm" ) cloneObj = LayerPopup.target.confirm.clone();
			if( mode == "progress" ) cloneObj = LayerPopup.target.progress.clone();

			target.empty().append( cloneObj.html() );

			if( msg ) target.find(".message").html( msg );
			
			var oHeight = target.height();
			var wHeight = $(window).height();
			var oWidth = target.width();

			if( $('.modal_bg').length > 0 )
			{
				var zIndex = $('.modal_bg:last').css('z-Index');
				//$('html,body').css('overflow','hidden');
				target.css({
					top:(wHeight-oHeight)/2,
					marginLeft:(-(oWidth/2)),
					visibility:'visible',
					zIndex:(parseInt(zIndex)+3)
				});
				$('body').append('<div class="modal_bg" style="z-index:'+(parseInt(zIndex)+2)+'"></div>');
			}
			else
			{
				//$('html,body').css('overflow','hidden');
				target.css({
					top:(wHeight-oHeight)/2,
					marginLeft:(-(oWidth/2)),
					visibility:'visible'
				});
				$('body').append('<div class="modal_bg"></div>');
			}
			
			//target.draggable();
		
			$('.modal_alert_close', target).click(function(e){
				e.preventDefault();
				//$('html,body').css('overflow', LayerPopup.overflow); 
				$('.modal_bg:last-child').remove();
				$(this).parents('.popup').css({top:'-9999px',visibility:'hidden'});
			});
	},
	
	//alert_popup
	alert : function( msg, callback )
	{
			LayerPopup.show( LayerPopup.target.alert, "alert", msg );
			
			if( typeof callback != 'undefined' && callback)
			{
				$('.modal_alert_confirm', LayerPopup.target.alert).click(function(e){
					e.preventDefault();
					//$('html,body').css('overflow', LayerPopup.overflow);
					$('.modal_bg:last-child').remove();
					$(this).parents('.popup').css({top:'-9999px',visibility:'hidden'});
			
					if (typeof callback == 'function') {
						callback();
					} else {
						if( callback ) {
							if( callback.indexOf("(") == -1 ) eval( callback +"()");
							else eval( callback );
						} else {
							if( typeof( confirmAfter ) == "function" ) {
								confirmAfter();
							}
						}
					}
					
					$(this).unbind("click");
				});
			}
			else
			{
				$('.modal_alert_confirm', LayerPopup.target.alert).click(function(e){
					e.preventDefault();
					//$('html,body').css('overflow', LayerPopup.overflow);
					$('.modal_bg:last-child').remove();
					$(this).parents('.popup').css({top:'-9999px',visibility:'hidden'});
				});
			}
	},
	
	//confirm_popup
	confirm : function( msg, callback )
	{
			LayerPopup.show( LayerPopup.target.confirm, "confirm", msg );
		
			$('.modal_alert_confirm', LayerPopup.target.confirm).click(function(e){
				e.preventDefault();
				//$('html,body').css('overflow', LayerPopup.overflow);
				$('.modal_bg:last-child').remove();
				$(this).parents('.popup').css({top:'-9999px',visibility:'hidden'});
		
				if (typeof callback == 'function') {
					callback();
				} else {
					if( callback ) {
						if( callback.indexOf("(") == -1 ) eval( callback +"()");
						else eval( callback );
					} else {
						if( typeof( confirmAfter ) == "function" ) {
							confirmAfter();
						}
					}
				}
				
				$(this).unbind("click");
			});
	},

	// progress 팝업은 close 에 callback
	progress : function(msg, callback)
	{
			LayerPopup.show( LayerPopup.target.progress, "progress", msg );
			
			if( typeof callback != 'undefined' && callback)
			{
				$('.modal_progress_close', LayerPopup.target.progress).click(function(e){
					e.preventDefault();
					//$('html,body').css('overflow', LayerPopup.overflow);
					$('.modal_bg:last-child').remove();
					$(this).parents('.popup').css({top:'-9999px',visibility:'hidden'});
			
					if (typeof callback == 'function') {
						callback();
					} else {
						if( callback ) {
							if( callback.indexOf("(") == -1 ) eval( callback +"()");
							else eval( callback );
						} else {
							if( typeof( confirmAfter ) == "function" ) {
								confirmAfter();
							}
						}
					}
					
					$(this).unbind("click");
				});
			}
			else
			{
				$('.modal_progress_close', LayerPopup.target.progress).click(function(e){
					e.preventDefault();
					//$('html,body').css('overflow', LayerPopup.overflow);
					$('.modal_bg:last-child').remove();
					$(this).parents('.popup').css({top:'-9999px',visibility:'hidden'});
				});
			}
	},
	
	// popup close
	closeProgress : function() 
	{
		$('.modal_progress_close', LayerPopup.target.progress).click();
	}
}

$(document).ready(function(){
    $(document).on('click','#alertBtn',function(e){
        LayerPopup.alert("이것은 알럿창입니다.",function(){$('.modal_bg').remove();});
        return false;
    });
	$(document).on('click','#confirmBtn',function(e){
        LayerPopup.confirm("이것은 컨펌창입니다.",function(){
			LayerPopup.alert("확인을 누르셨습니다.",function(){$('.modal_bg').remove();});
		});
        return false;
    });

});
</script>

</html>
728x90
LIST
저작자표시 동일조건
'javascript' 카테고리의 다른 글

slick-slider-vertical config (0)	2023.04.11
swiper-vertical-slider (0)	2023.04.03
브라우저의 뒤로가기 버튼 이벤트 케치 Back Forward Cache (0)	2023.01.25
ajax+post+csrf+spring+security (0)	2023.01.06
jquery progressbar by button event(버튼에 의한 진행율 표시) (0)	2022.11.08
'javascript' Related Articles
Comments
ふたりで

jquery+LayerPopUp+alert+confirm 본문

jquery+LayerPopUp+alert+confirm

'javascript' 카테고리의 다른 글

티스토리툴바
