jQuery를 이용한 커스텀 alert 창

Language/Javascript

jQuery를 이용한 커스텀 alert 창

라하트 2011. 6. 4. 16:37

기존 Alert 창이 모달이긴 하나, 디자인적인 수정도 안되며, 별로 아름답지 않아서.. jQuery를 이용해 커스텀 alert창을 만들게 되었다.

차후에 다른 ui를 더해서 하나의 ui 라이브러리 및 테마 적용을 위해 js, css, html 을 따로 제작 하였다.

CSS

#l_alert_bg { display:block; position:fixed; _position:absolute; top:0; left:0; width:100%; height:100%; z-index:10000; }

#l_alert_bg.open { display:block; }

#l_alert_bg .bg { position:absolute; top:0; left:0; width:100%; height:100%; background:#000; opacity:.5; filter:alpha(opacity=50); }

#l_alert { width:400px; background:#c5d8eb; padding:2px 2px 2px 2px; font-size:small; position:absolute; top:50%; left:50%; margin:-150px 0 0 -194px; line-height:normal; white-space:normal;}

#l_alert_title { height:20px; display:block; background:#9dc6ef; padding-top:3px; font-weight:bold; color:black; }

#l_alert_content { background:white; padding-top:5px; padding-bottom:10px; padding-right:5px; padding-left:5px; }

#l_alert_icon { float:left; background-image:url('/Content/alert_img.gif'); width:40px; height:40px; }

#l_alert_detail { margin-left:50px; padding-bottom:20px; }

#l_alert_btnSpace { background:#ddd;padding-top:5px; padding-bottom:2px; padding-right:5px; height:23px; clear:both; }

#l_alert_btnConfirm { height:18px; width:50px; border:double 3px black; float:right; text-align:center; cursor:pointer; background:white; padding-top:2px; }

#l_alert_btnConfirm a { text-decoration:none;}

// 경고창 출력

function Alert(msg) {

var str = '';

str = '<div id="l_alert_bg" class=""><div class="bg"></div> ';

str = str + ' <div id="l_alert"> ';

str = str + ' <div id="l_alert_title"> ';

str = str + ' 확인 ';

str = str + ' </div> ';

str = str + ' <div id="l_alert_content"> ';

str = str + ' <div id="l_alert_icon"></div> ';

str = str + ' <div id="l_alert_detail">' + msg + '</div> ';

str = str + ' </div> ';

str = str + ' <div id="l_alert_btnSpace"> ';

str = str + ' <div id="l_alert_btnConfirm"><a href="#" onclick="AlertClose();">확인</a></div> ';

str = str + ' </div> ';

str = str + '</div> ';

$(str).appendTo(document.body);

$('#l_alert_bg').addClass('open');

}

function AlertClose() {

$('#l_alert_bg').remove();

return false;

}

function AlertT(title, msg) {

var str = '';

str = '<div id="l_alert_bg" class=""><div class="bg"></div> ';

str = str + ' <div id="l_alert"> ';

str = str + ' <div id="l_alert_title"> ';

str = str + ' ' + title + ' ';

str = str + ' </div> ';

str = str + ' <div id="l_alert_content"> ';

str = str + ' <div id="l_alert_icon"></div> ';

str = str + ' <div id="l_alert_detail">' + msg + '</div> ';

str = str + ' </div> ';

str = str + ' <div id="l_alert_btnSpace"> ';

str = str + ' <div id="l_alert_btnConfirm" onclick="AlertClose();"><a href="#" onclick="AlertClose();">확인</a></div> ';

str = str + ' </div> ';

str = str + '</div> ';

$(str).appendTo(document.body);

$('#l_alert_bg').addClass('open');

}

HTML