본문 바로가기
IT/Web

jQuery UI 를 이용한 Custum Alert, Confirm

by Spring Up!! 2022. 9. 7.
반응형

크롬에서는 IE 와 다르게 alert 창이 브라우저창 내부에서 팝업이 된다. 그리고 그 사이즈와 위치를 조정할 수 없다.
그래서 찾아보고 알아보게 된 것을 정리한다. codeproject 에서 퍼온소스 인데 링크는 알게 되면 기재할 예정이다.

<link href="/css/juery.ui.dialog.css" rel="stylesheet" type="text/css">
<link href="/css/juery.ui.button.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="/js/jquery.ui.widget.min.js"></script>
<script type="text/javascript" src="/js/jquery.ui.button.min.js"></script>
<script type="text/javascript" src="/js/jquery.ui.dialog.min.js"></script>
<script type="text/javascript" src="/js/jquery.ui.position.min.js"></script>

<script language="Javascript" type="text/Javascript">
	function jalert(alert_msg, alert_title, onCloseCallback) {
    	if(!alert_msg) return;
        var div = $('<div></div>');
        div.html(alert_msg).dialog({
        	title:alert_title
            ,resizable:false
            ,modal:true
            ,buttons:{
              	"OK":function() {
                   	$(this).dialog("close");
                    div.remove();
                    delete div;
                }
             }
            ,close:onCloseCallback
            ,position:'center'
        });
        if (!alert_title) div.siblings('.ui-dialog-titlebar').hide();
    }
    
    function jconfirm(alert_msg, alert_title, onCloseCallback) {
    	if(!alert_msg) return;
        var div = $('<div></div>');
        div.html(alert_msg).dialog({
            	title:alert_title
            ,resizable:false
            ,modal:true
            ,buttons:{
            	   "OK":function() {
                	   $(this).dialog("close");
                   div.remove();
                   delete div;
                },
                "Cancel":function() {
                   div.remove();
                   delete div;
                }
             }
            ,close:onCloseCallback
            ,position:'center'
        });
        if (!alert_title) div.siblings('.ui-dialog-titlebar').hide();
    }
</script>



"이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다."



반응형

댓글