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

9人阅读 评论(0) 收藏 举报
分类:

实际效果就是这样的!


写的不是很好,连续快速点击时有点小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)
    }
})
查看评论

Android自定义组合控件

-
  • 1970年01月01日 08:00

自定义消息框MessagBox

  • 2014年10月12日 13:32
  • 29KB
  • 下载

【element-ui】messageBox弹窗提示消息换行问题。

本文代码引用自element官网demo自定义messageBox。 首先看一下不换行的效果图: 然后直接上代码。 var Main = { methods: { ...
  • u012830533
  • u012830533
  • 2017-09-22 13:09:07
  • 2481

Element-UI消息提示组件Message在Vuex中的调用实现

在最近的项目开发中,前端部分使用 Vue 开发,整个页面基于 Element-UI 实现。 由于是单页面多组件应用,使用了 Vuex 做状态管理。 为了页面交互的友好和风格的统一,消息提醒使用 E...
  • wpfLove
  • wpfLove
  • 2018-02-13 17:06:45
  • 354

关于element-ui 中使用Notice组件(Message、MessageBox、Notification)所遇到的坑

今天在全局使用Message组件的时候(单独使用import Message from ‘element-ui’),发现第一次打开Message后再打开的Message无法关闭了,无论是使用showC...
  • qq_32593725
  • qq_32593725
  • 2018-01-29 14:17:04
  • 557

Elementui按需引用 的Message不起效

如题或者报错 (TypeError: Cannot read property 'error' of undefined)解决办法:import Vue from 'vue' import { Mes...
  • TionSu
  • TionSu
  • 2018-02-26 18:01:09
  • 161

Delphi 7 自定义消息框MessageMyDlg

在之前的文章《深入了解Delphi 7中的四种消息框》了解到MessageDlg消息框不够强大,而Application.MessageBox、MessageBox实质都是Windows API函数M...
  • akof1314
  • akof1314
  • 2011-04-27 14:46:00
  • 5362

使用jQuery的message插件实现右下角弹出消息框

http://www.cnblogs.com/hnsdwhl/archive/2011/01/10/1931797.html  有时在页面加载的时候,需要在页面的右下角弹出一个小的提示框,显...
  • mituan1234567
  • mituan1234567
  • 2015-03-22 10:13:14
  • 484

自定义消息ON_MESSAGE()

有些时候光靠windows原有的消息是不够的,需要自定义消息来满足特定的功能,比如在与外部设备通讯时,如果接收到数据,就需要进行存储,但并没有直接的消息可以使用,需要自己定义。 当然自定义消息不局限...
  • u012372584
  • u012372584
  • 2016-02-02 16:07:26
  • 1414

Windows Message消息详解

1。知道在Microsoft Visual Studio 8/VC/PlatformSDK/Include下的Windows.h和winUser.h中可以找到常量定义。2。知道有软件可以帮助查找常量定...
  • MaybeHelios
  • MaybeHelios
  • 2006-06-01 00:19:00
  • 1236
    个人资料
    等级:
    访问量: 1105
    积分: 64
    排名: 160万+
    文章存档