### 制作自定義彈窗和promise機制解決回調方法問題
~~~javascript
function pop(arg){
if(!arg){
console.error('沒有參數傳入！');
}
var conf = {},$box,$mask,$title,$content,
$confirm,$cancel,dfd,confirmed;
dfd = $.Deferred();
if(typeof arg == 'string'){
conf.title = arg;
}else{
conf = $.extend(conf,arg);
}
/*彈出框*/
$box = $('<div class="box">'+
'<div class="pop-title">'+conf.title+'</div>'+
'<div class="pop-content"></div>'+
'<div style="text-align:center"><button class="primary confirm">確定</button>'+
'<button class="cancel">取消</button></div>'+
'</div>').css({
color:'#444',
width:'300px',
height:'200px',
background:'#FFF',
position:'fixed',
'border-radius':3,
});
/*標題位置*/
$title = $box.find('.pop-title').css({
padding:'5px 10px',
'font-weight':900,
'font-size':20,
'text-align':'center',
});
$content = $box.find('.pop-content').css({
padding:'5px 10px',
'text-align':'center'
});
$mask = $('<div></div>')
.css({
position:'fixed',
background:'rgba(0,0,0,0.5)',
top:0,
bottom:0,
left:0,
right:0,
});
function adjust_box_position(){
var window_width = $window.width()
,window_height = $window.height()
,box_width = $box.width()
,box_height = $box.height()
,move_x
,move_y
;
move_x = (window_width-box_width)/2;
move_y = (window_height-box_height)/2;
$box.css({
left:move_x,
top:move_y,
})
}
$window.on('resize',function(){
adjust_box_position();
});
adjust_box_position();
$mask.appendTo($body);
$box.appendTo($body);
var timer = setInterval(function(){
if(confirmed !== undefined){
dfd.resolve(confirmed);
clearInterval(timer);
dismiss_pop();
}
},50);
$confirm = $box.find('button.confirm');
$cancel = $box.find('button.cancel');
$confirm.on('click',function(){
confirmed = true;
lg('confirm');
})
$cancel.on('click',function(){
confirmed = false;
lg('cancel');
});
/*關閉彈窗*/
function dismiss_pop(){
$mask.remove();
$box.remove();
}
return dfd.promise();
}
~~~
