自定义提示框消息提示

经常看到网站中一些消息提示非常美观，如今越来越多的用户注重体验，而浏览器自带的弹窗会给用户带来非常糟糕的体验。那么如何自定义提示框呢？

<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);    //这里的参数来控制消失的时间
}

好了，说到这里，我们来看一下效果：

喜欢请点赞关注，我会持续更新项目中碰到的各种比较实用的经验！