jQuery点击调用消息提示框
1、新建html文档。
2、准备好需要用到的字体图标。
3、书写hmtl代艨位雅剖码。<div class="p40"> <p>点击调用提示</p> <button class="btn btn-success">成功提示</button> <button class="btn btn-danger">失败提示</button> <button class="btn btn-warning">警告提示</button> <button class="btn btn-info">信息提醒</button></div><div class="p40"><p>调用方式：</p> <p class="mt20">参数详解：</p><p>message:' 操作成功', //提示信息time:'2000', //显示时间（默认：2s）type:'success', //显示类型，包括4种：success.error,info,warningshowClose:false, //显示关闭按钮（默认：否）autoClose:true, //是否自动关闭（默认：是）</p></div>
4、书写css代码。.c-message { position: fixed; top: 30px; le熠硒勘唏ft: 50%; padding-left: 50px; padding-right: 20px; height: 40px; line-height: 40px; background: #fff; min-width: 200px; color: #666; box-shadow: 0 2px 4px rgba(0,0,0,.12), 0 0 6px rgba(0,0,0,.04); z-index: 9999; }.c-message--icon { color: #fff; width: 40px; height: 40px; text-align: center; position: absolute; left: 0; top: 0; line-height: 40px; }.c-message--success { background: #13CE66 no-repeat 0 50%; }.c-message--error { background: #FF4949 no-repeat 0 50%; }.c-message--info { background: #20A0FF no-repeat 0 50%; }.c-message--warning { background: #F7BA2A no-repeat 0 50%; }.c-message--close { position: absolute; right: 10px; color: #999; text-decoration: none; cursor: pointer; font-size: 30px; top: 0; line-height: 34px; display: block; height: 40px; }.c-message--close:hover { color: #666; }@keyframes messageFadeInDown { 0% {-webkit-transform: translate3d(0, -100%, 0);transform: translate3d(0, -100%, 0)}100% {-webkit-transform: none;transform: none}}.c-message.messageFadeInDown { -webkit-animation-duration: .6s; animation-duration: .6s; -webkit-animation-fill-mode: both; animation-fill-mode: both -webkit-animation-name: messageFadeInDown;animation-name: messageFadeInDown; }@keyframes messageFadeOutUp { 0% {opacity: 1}100% {opacity: 0;-webkit-transform: translateY(-100%);transform: translateY(-100%)}}.c-message.messageFadeOutUp { -webkit-animation-duration: .6s; animation-duration: .6s; -webkit-animation-fill-mode: both; animation-fill-mode: both -webkit-animation-name: messageFadeOutUp;animation-name: messageFadeOutUp }
5、书写并添加js代码。<script src="js/jquery.min.js"></script><script src="js/message.js"></script>
6、代码整体结构。
7、查看效果。
