于台人的博客

前端小兵

自定义Message消息框,类似Element-ui的message

实际效果就是这样的!


写的不是很好,连续快速点击时有点小Bug,也没想深究了,公司项目太多台太忙,不想多说了,直接贴上代码,有需要的可以参考一下!

HTML部分:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>关注领券</title>
    <!--6、引入bootstrap.css-->
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
    <div id="banner">
        <div>
            <img src="img/banner1.png" alt="banner">
            <div>
                <p class="activeTimeName">活动时间:</p>
                <p class="activeTimeValue">2018.4.18~2018.5.31</p>
            </div>
        </div>
        <img src="img/banner2.jpg" alt="banner">
    </div>
    <div id="forms" class="container">
        <div class="row">
            <div class="col-md-12">
                <input type="tel" maxlength="11" class="form-control" id="userPhone" placeholder="请输入手机号">
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <button class="btn btn-danger" type="button" id="getCoupon">免费领取</button>
            </div>
        </div>
    </div>
    <!--5、引入 jquery-->
    <script src="js/jquery-1.11.3.js"></script>
    <script src="js/index.js"></script>
</body>
</html>

CSS部分:

/*message弹框样式*/
.message{
    position:fixed;
    padding:12px 10px;
    text-align: center;
    font-size:14px;
    overflow-x: hidden;
    overflow-y: auto;
    word-break: break-all;
    width:60%;
    z-index: -1;
    top: 0;
    left:20%;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    background: rgba(0,0,0,0);
    color:transparent;
    transition: all 300ms;
    -moz-transition: all 300ms;
    -webkit-transition: all 300ms;
    -o-transition: all 300ms;
}
.message.open{
    z-index: 19890513;
    top:248px;
    color:#fff;
    background: rgba(0,0,0,0.7);
}
.message.close{
    z-index: -1;
    top:0;
    color:transparent;
    background: rgba(0,0,0,0);
}

JS部分:

//封装的弹出窗
function MsgBox(html,ms) {
    var child=document.createElement('div');
    child.innerHTML=html;
    child.setAttribute('class','message');
    document.body.appendChild(child);
    setTimeout(function () {
        $(child).addClass('open');
        setTimeout(function () {
            var messageList=document.querySelectorAll('.message');
            if(messageList.length>0){
                for(var i=0;i<messageList.length;i++){//遍历元素,为每个元素去掉.open,增加.close
                    $(messageList[i]).removeClass('open').addClass('close');
                }
                setTimeout(function (){
                    for(var j=0;j<messageList.length;j++){//重新遍历一次元素,然后从DOM移出
                        $(messageList[j]).remove()
                    }
                },1500)
            }
        },ms)
    },100);
}
//免费领取
$('#getCoupon').click(function (e) {
    e.preventDefault();
    var url="http://dev.api.syxgo.com/v1/user/coupons";
    var userPhone=$('#userPhone').val();
    if(userPhone==="" || userPhone.length<11 ||(userPhone.search(/\d{11}/)===-1)){
        MsgBox('请输入正确的手机号码!',1500);
    }
    else{
        MsgBox('领取成功,请去APP钱包查看!',1500)
    }
})
阅读更多
个人分类: jQuery 前端
上一篇php 读取二进制文件---笔记
想对作者说点什么? 我来说一句

自定义消息框MessagBox

2014年10月12日 29KB 下载

没有更多推荐了,返回首页

关闭
关闭