仿 window对象 confirm方法

Posted 2020-12-27 ycxiaoyang

效果图：

调用方式：

Confirm(‘确定删除？‘, function(boo){

　　if(boo){

　　　　//用户点击确定

　　}else{

　　　　//用户点击取消

　　}

})

CSS:

.Btn{display: inline-block;margin-bottom: 0;font-weight: normal;text-align: center;vertical-align: top;cursor: pointer;background-image: none;
border: 1px solid transparent;padding: 5px 6px;line-height: 16px;color: #fff; background-color: #83b266; white-space: nowrap;font-size: 14px;border-radius: 4px;-webkit-user-select: none;
-moz-user-select: none;-ms-user-select: none;-o-user-select: none;user-select: none;margin-right: 6px;}
.Btn.Big{padding: 8px 30px;}
.Btn.Read{background-color: #ff4e00;}
.Confirm{position: fixed;width: 100%;height: 100%;background-color: rgba(0,0,0,0.5);top: 0;left: 0;z-index: 99;}
.close{background: url(images/close.png) no-repeat;background-size: 100% 100%;width: 16px;height: 16px;right: 20px;top: 10px; position: absolute;}
.Confirm .ConfirmBox{position: absolute;top: -500px;background-color: #fff;border-radius: 10px;left: 50%;margin-left: -175px;}
.Confirm .ConfirmTitl{background-color: #83b266;text-align: center; color: #fff;padding: 12px 20px;border-top-left-radius: 10px;border-top-right-radius: 10px;}
.Confirm .ConfirmCont{background-color: #fff;overflow: hidden;width: 280px;padding:10px 30px;text-align: center;}
.Confirm .ConfirmQuset{display: inline-block;padding: 20px 0 20px 60px;background: url(images/shouoye_26.png)no-repeat;background-position: left center;line-height: 24px;}
.Confirm .ConfirmBtn{text-align: center;padding: 10px 30px;margin-bottom: 10px;}
.Confirm .ConfirmBtn .Read{margin-left: 30px;}

JS:

依赖JQ库

function Confirm(quest,callback){
　　var Confirm = document.createElement(‘div‘);
　　Confirm.className = ‘Confirm‘;
　　$(Confirm).append(
　　　　‘<div class="ConfirmBox"><div class="ConfirmTitl">系统提示<span class="close"></span></div>‘
　　　　+‘<div class="ConfirmCont"><div class="ConfirmQuset">‘+quest+‘</div></div><div class="ConfirmBtn">‘
　　　　+‘<span class="Btn Big">确认</span><span class="Btn Big Read">取消</span></div></div>‘
　　);
　　$(‘body‘).append(Confirm);

　　$(‘.ConfirmBox‘).animate({‘top‘: parseInt($(window).height()/3)-parseInt($(‘.ConfirmBox‘).height()/2)},300);
　　$(Confirm).click(function(e){
　　
　　　　if( e.target == $(‘.Confirm .close‘)[0] ){
　　　　　　Remove()
　　　　　　callback?callback(false):‘‘;
　　　　}else if( e.target == $(‘.Confirm .Btn‘)[0] ){
　　　　　　Remove()
　　　　　　callback?callback(true):‘‘;
　　　　}else if( e.target == $(‘.Confirm .Btn‘)[1] ){
　　　　　　Remove()
　　　　　　callback?callback(false):‘‘;
　　　　}else{
　　　　　　return;
　　　　}
　　})
　　function Remove(){
　　　　$(‘.ConfirmBox‘).animate({‘top‘: ‘-500px‘},300,function(){
　　　　　　$(Confirm).remove()
　　　　})
　　}
};