제가 alert, confirm, prompt 을 제이쿼리로 오버라이드 해서
메세지 창의 레이아웃을 변경하고싶어서 소스를 작성햇는데
메세지창이 뜰때 브라우저가 멈춤 상태가 되고 거기서 확인이나 취소를 눌러야
다시 브라우저가 활성화 되는 기능이 뭔지 몰라 한참을 찾아 다녔는데요
jalert 보니 재귀함수를 쓰더라구요
이게 맞는건지 맞는다면
제가 만든 소스가 왜 안되는지 문제를 좀 지적 좀 부탁드립니다.
jQuery.fn.Wo_msg = function (options) {
var defaults = {
speed:250,
bg:"rgba(40, 40, 40, 0.8)",
radius:6,
width:300,
height:180,
popup:"background:white; border:0px;",
prompt:"background:white; border:0px;",
approve:"width: 90px; height:30px; background:#F39C12; color:white; border:0px;",
cancel:"width: 90px; height:30px; background:#89C4F4; color:white; border:0px;",
approve_value:"확인",
cancel_value:"취소"
};
var settings = $.extend({}, defaults, options);
_content = function(type,msg){
var cancel="";
var approve = "";
approve = "<input type='button' id='Wo_approve' value='"+settings.approve_value+"' style='cursor:pointer;margin: 0px 4px;"+settings.approve+"'>";
cancel = "";
input = "";
if(type == "confirm"){
cancel = "<input type='button' id='Wo_cancel' value='"+settings.cancel_value+"' style='cursor:pointer;margin: 0px 4px;"+settings.cancel+"'>";
}//if END
if(type == "prompt"){
input = "<input type='text' id='Wo_prompt_text' value='"+settings.cancel_value+"' style='width:100%;"+settings.prompt+"'>";
}//if END
$("body").append("<div id='Wo_FixedBg' style='display:none; position:fixed; background:"+settings.bg+"; width:100%; height:100%; left:0px; top:0px; z-index: 99999;'><div style='position: absolute;width:100%; height:"+settings.height+"px; top:50%; margin-top:-"+(settings.height)/2+"px;'><div style='margin:0px auto; border-radius:"+settings.radius+"px; width:"+settings.width+"px;height:"+settings.height+"px;"+settings.popup+"'><div style='padding: 5%; text-align: center;vertical-align: middle;display: table-cell; width:"+settings.width+"px; height:"+(settings.height)/1.4+"px;'>"+msg+input+"</div><div style='width:100%;text-align:center;'>"+approve + cancel+"</div></div></div></div>");
_show();
}//_content END
_view = function(msg, type, callback){
switch(type){
case "alert" :
_content(type,msg);
$("#Wo_approve").on("click",function() {if( callback ) callback(true); _close();});
break;
case "confirm" :
_content(type,msg);
$("#Wo_approve").on("click",function() {if( callback ) callback(true); _close();});
$("#Wo_cancel").on("click",function() {if( callback ) callback(false); _close();});
break;
case "prompt" :
_content(type,msg);
$("#Wo_approve").on("click",function(){
var value = $("#Wo_prompt_text").val();
if( callback ) callback(value); _close();
});
break;
}//switch END
}// _viewEND
_show = function(){
$("#Wo_FixedBg").fadeIn(settings.speed);
}// _show END
_close = function(){
$("#Wo_FixedBg").fadeOut(settings.speed,function(){
$("#Wo_FixedBg").remove()
});
}// _close END
window.alert = function(message, callback) {
_view(message, "alert", function(result) {
if( callback ) callback(result);
});
}// window.alert END
window.confirm = function(message, callback) {
_view(message, "confirm", function(result) {
if( callback ) callback(result);
});
}// window.confirm END
window.prompt = function(message, callback) {
_view(message, "prompt", function(result) {
if( callback ) callback(result);
});
}// window.prompt END
}
댓글 6개
게시글 목록
| 번호 | 제목 |
|---|---|
| 1717629 | |
| 1717626 | |
| 1717625 | |
| 1717621 | |
| 1717619 | |
| 1717611 | |
| 1717610 | |
| 1717609 | |
| 1717607 | |
| 1717601 | |
| 1717598 | |
| 1717591 | |
| 1717590 | |
| 1717583 | |
| 1717575 | |
| 1717572 | |
| 1717568 | |
| 1717566 | |
| 1717549 | |
| 1717545 | |
| 1717533 | |
| 1717512 | |
| 1717511 | |
| 1717508 | |
| 1717495 | |
| 1717479 | |
| 1717473 | |
| 1717470 | |
| 1717463 | |
| 1717452 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기