html自动消失的弹窗,替代系统alert和confirm弹窗、自动消失弹窗样式

/* dialog css */

.quui_dialog_bg{position: fixed; z-index: 998; background: rgba(0,0,0,.4) ;left: 0; right: 0; top: 0; bottom: 0;}

.quui_dialog_outer{position: fixed; z-index: 1000; width: 270px; border-radius: 13px; left: 50%; top: 50%; background-color: #fff; transform: translate3d(-50%,-50%,0);}

.quui_dialog_outer .hd{position: relative; padding:15px; text-align: center;}

.quui_dialog_outer .hd::after{content: ''; position: absolute; z-index: 15; top: auto; right: auto; bottom: 0; left: 0; display: block; height: 1px; width: 100%; background: rgba(0,0,0,.2); transform: scaleY(.5); transform-origin: 50% 100%;}

.quui_dialog_outer .bd{height: 44px;}

.quui_dialog_outer .title{font-size: 18px; font-weight: 500;}

.quui_dialog_outer .desc{margin:5px 0 0; font-size: 14px;}

.quui_dialog_outer .t_btn{color: #007aff; height: 44px; line-height: 44px; width: 100%; font-size: 17px; display: block; text-align: center; font-weight: bold;}

.quui_dialog_confirm .t_btn{width: 50%; float: left; display: inline;}

.quui_dialog_confirm .t_btn:first-child{position: relative;}

.quui_dialog_confirm .t_btn:last-child{font-weight: normal; }

.quui_dialog_confirm .t_btn:first-child::after{display: block; content: ''; position: absolute; width: 1px; height: 100%; z-index: 15; top:0; right: 0; left: auto;bottom: auto; background-color: rgba(0,0,0,.2); transform: scaleX(0.5); transform-origin: 100% 50%;}

.quui_dialog_toast{background-color: #d8d8d8; padding:8px;}

.quui_dialog_toast .tiptxt{text-align: center; line-height: 1.6;}

/* dialog css end*/

警告消息弹框

确认消息弹框

自动消失提示框

var quDialog = function(){

var confirmClickOk,

confirmClickNo,

hasToastTip = 0;

this.alert = function(obj){

var title = obj.title,

content = obj.content,

btntext = obj.btntext,

html = '

'+title+'

'+content+'

'+btntext+'

';

$('#page').append(html);

}

this.confirm = function(obj){

confirmClickOk = obj.clickOk;

confirmClickNo = obj.clickNo;

var title = obj.title,

content = obj.content,

btntext1 = obj.btntext1,

btntext2 = obj.btntext2,

html = '

'+title+'

'+content+'

'+btntext1+' '+btntext2+'

';

$('#page').append(html);

}

this.toast = function(obj){

var text = obj.text,

time = obj.time,

timer,

html = '

'+text+'

';

if(hasToastTip == 1){

return;

}

$('#page').append(html);

hasToastTip = 1;

timer = setTimeout(function(){

$('.quui_dialog_toast').remove();

hasToastTip = 0;

clearTimeout(timer);

},time);

}

$('#page').delegate('#qu_dialog_alter_btn','click',function(){

hideMask();

})

$('#page').delegate('#qu_dialog_confirm_ok','click',function(){

hideMask();

confirmClickOk();

})

$('#page').delegate('#qu_dialog_confirm_no','click',function(){

hideMask();

confirmClickNo();

})

function hideMask(){

$('.quui_dialog_outer').remove();

$('.quui_dialog_bg').remove();

}

}

var dialog = new quDialog;

// alert提示

$('#alertPop').click(function(){

dialog.alert({

title:'Hello Alter',

content:'代替系统alter提示',

btntext:'确定'

})

})

//confirm弹窗

$('#confirmPop').click(function(){

dialog.confirm({

title:'Hello Confirm',

content:'代替系统confirm提示,确认?',

btntext1:'是',

btntext2:'否',

clickOk:function(){

$('#tip').html('您点击了是');

},

clickNo:function(){

$('#tip').html('您点击了否');

}

})

})

//自动消失提示框

$('#toastPop').click(function(){

dialog.toast({

text:'自动消失提示框',

time:2000

})

})