自制弹出框（js alert）

前端技术 2017/07/13 jQuery

由于系统默认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 = \'\';        
        tips += \'\';        
        tips += \'\';        
        tips += \'\';        
        tips += \'
\';                 tips += \'\'+sets.content+\'
\';                 tips += \'
\';                 tips += \'
\';             $(\'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

转载请注明出处。

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

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案