Programming/Javascript

alert, confirm, prompt 를 modal dialog(jquery-ui)로 대체

Lawmin 2021. 9. 1. 15:25

 

Chrome 기반 브라우저에서 iframe 내 다른 도메인의 alert, confirm, prompt를 차단하는 이슈 대응 방법

<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" >
<link type="text/css" href="css/jquery-ui.min.css" rel="stylesheet">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-ui.min.js"></script>
<script type="text/javascript" >
function jalert(inner_html, width, func) {
	$("#dialog").html(inner_html);
	$("#dialog").dialog({
		modal: true,
		width: width,
		buttons: {
			OK: function() {
		    	$(this).dialog("close");
		    	if(func !== undefined) {
		       		func();
		    	}
			}
		}
	});
}

function jconfirm(inner_html, width, ok_func, cancel_func) {
	$("#dialog").html(inner_html);
	$("#dialog").dialog({
		modal: true,
		width: width,
		buttons: {
			OK: function() {
		    	$(this).dialog("close");
		    	if(ok_func !== undefined) {
		    		ok_func();
		    	}
			},
			Cancel: function() {
		    	$(this).dialog("close");
		    	if(cancel_func !== undefined) {
		    		cancel_func();
		    	}
			}
		}
	});
}
</script>
</head>
<body>
<div id="dialog" title="알림"></div>
<script type="text/javascript">
jalert("아이디를 입력해 주십시오.<br>Please Enter your Id", 300, function() { form.usrid.focus(); });
jconfirm("변경하시겠습니까?<br>Would you like to change?", 300, function() { form.submit(); })
</script>