手把手教你开发一款属于自己的前端jQuery消息组件

开源地址

https://gitee.com/tech-famer/farmer-messager

本套开源组件包括加载框、提示框、确认框、单行输入确认框、多行输入确认框、进度条等，使用说明见开源地址。

前言

在我们的工作过程当中，很多时候需要用到消息弹框，用来提示用户。浏览器自带的弹框过于简陋，不够美观，前端框架提供的组件样式固定，很难做到定制化。而现实的需求是，每个系统有自己的样式风格，找到一款完美匹配系统的消息弹框组件简直成了一种奢望。基于此，今天就手把手教大家如何开发一套属于自己的前端jQuery消息组件。

效果预览

开发步骤

一、制作纯html静态消息框，代码如下：

<div id="d_alertcover" class="d_cover" style="width:100%;height:9999px;background-color:rgba(0,0,0,0.2);overflow:hidden;z-index:99999999999999999999;position:fixed;left:0;top:0;">
	<div id="d_alert" style="overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.5); padding-top: 30px; position: relative; width: 300px; top: 150px; left: 533px; z-index: 9999; border-radius: 5px; box-shadow: rgba(0, 0, 0, 0.1) 0px 25px 45px; opacity: 1;">
		<div id="d_title" style="background: linear-gradient(to bottom, rgba(7,83,133,1), rgba(7,83,133,0.5));line-height:30px;font-size:12px;width:100%;height:30px;color:#ffffff;position:absolute;top:0;left:0;cursor:move;border-radius:5px 5px 0 0;">
			<span id="d_uploading" style="padding-left:10px;">
				提示
			</span>
			<span style="float:right;padding-right:12px;color:red;opacity:0.7;line-height:30px;font-family:&quot;微软雅黑&quot;;cursor:pointer;font-size:14px;font-weight:700;">
				X
			</span>
		</div>
		<div style="width: 100%;height: 100%;position: absolute;top:0;z-index:-1;">
			<div style="filter:blur(40px);height: 40%;width: 100%;position:absolute;top: 0;left: 0;background: #1b73bd;">
			</div>
			<div style="filter:blur(80px);height: 40%;width: 40%;position:absolute;bottom: 20px;left: 0;background: #f6d881;">
			</div>
		</div>
		<div style="min-height:70px;padding:20px;background-color:rgba(255,255,255,0.9);line-height:15px;position:relative;border-radius:0 0 5px 5px;">
			<div style="position:absolute;top:20%;left:30px;width:30px;height:30px;line-height:30px;text-align: center;font-size:30px;font-weight:700;color:#FB8200;">
				!
			</div>
			<div style="margin-left:20%;margin-top:4%;font-size:12px;color:#333;">
				测试
			</div>
			<div style="font-size:12px;color:#333;margin-top:20px;">
				<span id="d_ok" style="background:#4891C6;display:inline-block;width:30%;height:25px;color:#ffffff;text-align:center;line-height:25px;border-radius:2px;margin-lef