由于系统默认alert弹出窗口不能自定义样式，有可能不符合网站的风格，系统默认的 alert 弹框样式实在是不忍直视，某种程度上影响了项目整体的体验。

以下是自定义 alert 弹出框的核心代码：

基于jQuery，JS代码如下，默认3秒自动关闭弹窗，可自定义返回方法：

function tips(options){ 
   var defaults = {
           icon: \'success\',
           content: \'成功！\',        
           callback: function(){}
    };
    var sets = $.extend(defaults,options||{});    
    var id = parseInt(Math.random()*100);        
    var tips = \'<div class="message-floor" id="messageBox_\'+id+\'">\';        
        tips += \'<div class="messge-box">\';        
        tips += \'<div class="messge-box-icon">\';        
        tips += \'<i class="message-toast-icon \'+ sets.icon +\'-icon"></i>\';        
        tips += \'</div>\';        
        tips += \'<div class="messge-box-content">\'+sets.content+\'</div>\';        
        tips += \'</div>\';        
        tips += \'</div>\';        
    $(\'body\').append(tips);        
    setTimeout(function(){
            $("#messageBox_"+id).animate({opacity:\'0\'},300,function(){ 
                       $("#messageBox_"+id).remove();            
                       sets.callback(true);            
                       return false;        
             });    
     },2000);
}

CSS代码如下：

.message-floor {
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	text-align: center;
	z-index: 100;
	visibility: visible;
}

.message-floor .messge-box {
	width: 145px;
	background: rgba(0,0,0,0.8);
	border-radius: 8px;
	text-align: center;
	position: absolute;
	top: 50%;
	left: 50%;
	width: 180px;
	height: 88px;
	margin-top: -44px;
	margin-left: -90px;
}

.messge-box .messge-box-icon {
	width: 26px;
	height: 26px;
	display: inline-block;
	margin: 18px 0 9px 0;
	position: relative;
	overflow: hidden;
	vertical-align: middle;
}

.messge-box .messge-box-content {
	font-size: 15px;
	line-height: 15px;
	color: #fff;
	padding: 0 10px 21px 10px;
}

.messge-box-icon h1 {
	color: white;
	display: inline;
	margin-top: 5px;
	font-size: 22px;
}

.message-toast-icon {
	background: url(../images/toast-icon.png) no-repeat;
	background-size: 28px 60px;
}

.success-icon {
	display: inline-block;
	height: 26px;
	width: 26px;
	background-position: -1px -29px;
}

.error-icon {
	display: inline-block;
	height: 26px;
	width: 26px;
	background-position: -1px -1px;
}

本文地址：https://www.stayed.cn/item/2

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我