IT/Web
jQuery UI 를 이용한 Custum Alert, Confirm
SpringUpOhWell!
2022. 9. 7. 01:01
반응형
크롬에서는 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>
"이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다."
728x90
반응형