jquery 플러그인 좀도와주세요 ㅜㅜ
본문
제가 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
}
답변 2
테스트를 해 보니, 작동에 문제가 없는 것 같습니다 :-)
플러그인 형태로 개발하셨으므로, 플러그인 호출이 안된 것이 아닌가 싶네요.
위 함수를 크롬 브라우저 콘솔에 붙인 후,
document 에 플러그인을 추가해 주었습니다.
$(document).ready(function(e) {
$(document).Wo_msg({}); //위 플러그인 실행
});
이후, 원하는 곳에서 alert("test"); 또는 confirm("test"); 실행
팝업 이상 없이 뜸
문제 없어 보이네요 :-)
그게 문제가 아니라 재귀함수가 발동이 안된다는게 문제입니다. 만약 제가 confirm 문으로 사용자에게 사용할지 를 물어봣는데 그게 true ,false값으로 반환이 되어 조건문을 실행을 해야 되는데 발동한 함수는 그냥 끝이나고 confirm 문은 반환값이 없어진다는게 문제입니다. ㅜㅜㅜㅜㅜㅜㅜ
이해했습니다.
http://jsfiddle.net/27tnLcv2/8/
위 내용을 참고해 보세요.
테스트 때문에 위의 소스코드 중, alert 관련 부분은 주석처리 하였습니다.
아래 주석 이하를 참고하시면 될 것 같습니다.
/***#################### 플러그인 이하 ###############################***/
감사합니다. 하지만 제가 생각 한것은 alert 와 confirm 기능이 정상적으로 사용하면서 confirm('삭제하시겠습니까?') 만써도 값이 리턴할수있도록 만들고 싶어서 그렇습니다.
플러그인 자체가 브라우저의 고유 객체인 window.confirm 을 가로챈 후, confrim("test", 함수명); 과 같이 사용하게
되어있어, 해당 플러그인으로는 원하시는 내용이 힘들 것으로 보입니다.
브라우저의 confirm 을 가로채어, 다른 기능을 실행한다면 위와 같이 하는 것이 맞고, 첨부해주신 플러그인을
분석해 보아도, 그렇게 사용하게끔 되어 있네요 :-)
