经常看到网站中一些消息提示非常美观，如今越来越多的用户注重体验，而浏览器自带的弹窗会给用户带来非常糟糕的体验。那么如何自定义提示框呢？
<b>1.CSS+jQuery+bootstrap实现手动关闭的自定义提示框</b>
- 首先，需要在html中写好提示的可隐藏元素。如：
bootstrap中文网http://v3.bootcss.com/
//这是bootstrap中可关闭的一个警告框
<div class="alert alert-warning alert-dismissible message" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<strong>尊敬的会员，</strong> 我们已经收到您的旨意。
</div>
//CSS样式：
//这里bootstrap中已经给好了样式，我不再做过多的样式改变，我只写一些定位样式以及隐藏属性
.message{
position:fixed;
width:200px;
height:60px;
left:50%;
top:50%;
margin:-30px 0 0 -100px;
z-index: 1000;
display: none;
}
这里需要讲解一下，我把元素设置为固定定位，设置宽高，left和top都为50%，这样其实并不居中，特别是在手机端会暴露的更明显，为了让提示框不管在任何屏幕尺寸始终都居中，这里设置margin值左和上都为负值，值等于宽和高的一半。
最后在需要的时候让这个元素显示。
//JS代码：
$('.message').css('display', 'block');
<b>2.CSS+jQuery实现自动义自动消失提示框</b>
有时候bootstrap的样式我们并不满意或者客户并不喜欢，我们就需要根据情况自定义样式，其实这种自定义样式非常简单，我们使用简单的span标签或者p标签就可以了，同样进行定位操作，下面来看一个比较完整的实例;
<div class="message2">
<p>您尚未选择有效的服务！</p>
</div>
//CSS代码：
.message2{
position:fixed;
width:220px;
height:36px;
left:50%;
top:50%;
margin:-13px 0 0 -110px;
z-index: 1000;
display: none;
padding: 10px 15px;
border-radius: 0;
background-color: rgba(0,0,0,0.6);
}
.message2 p{
color: white;
}
//JS代码：
if (data !== "success") {
$('.message').css('display', 'block');
setTimeout(function () { //这里设置了一个定时器
$(".message").css("display", "none");
}, 2500); //这里的参数来控制消失的时间
}
好了，说到这里，我们来看一下效果：
喜欢请点赞关注，我会持续更新项目中碰到的各种比较实用的经验！
