function pop(arg){ //arg为显示内容 if(!arg){ console.error('error'); } var conf={},$box,$mask,$title,$content,$confirm,$cancel,dfd, confirmed,timer; //判断arg为字符或对象 if(typeof arg=='string') conf.title=arg; else { conf=$.extend(conf,arg); } //调用Deferred(); dfd=$.Deferred(); //获得浏览器的宽度和高度,并应用在$box上 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)-30; $box.css({ left:move_x, top:move_y, }) } //移除提示框 function dismiss_pop(){ $mask.remove(); $box.remove(); } //$box的html和css $box=$('<div>'+'<div class="pop-title">'+conf.title+'</div>'+ '<div class="pop-content">'+ '<div><button style="margin-right:5px;" class="primary confirm">确定</button>'+ '<button class="cancel">取消</button></div>'+ '</div>'+ '</div>').css({ width:300, height:200, background: '#fff', position:'fixed', 'border-radius':3, 'box-shadow':'0 1px 2px rgba(0,0,0,.3)', color:'#444' }) //$mask的html和css $mask=$('<div></div>').css({ position:'fixed', background:'rgba(0,0,0,0.4)', top:0, bottom:0, left :0, right :0, }) //提示内容样式 $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' }) $confirm=$content.find('button.confirm'); $cancel=$content.find('button.cancel'); //不断等待用户点击,用户点击后停止 timer=setInterval(function(){ if(confirmed!==undefined){ //将confirmed传入resolve方法 dfd.resolve(confirmed); //停止setInterval clearInterval(timer); dismiss_pop(); } },50) //按钮点击事件 $confirm.on('click',function(){ confirmed=true; }) $cancel.on('click',function(){ confirmed=false; }) //mask点击事件 $mask.on('click',function(){ confirmed=false; }) //当调整浏览器窗口的大小时,发生 resize 事件。 $window.on('resize',function(){ adjust_box_position(); }) //将$mask和$box添加到body $mask.appendTo($body); $box.appendTo($mask); $window.resize(); //将promise返回 return dfd.promise(); }
|