简化版 分站 地图 日历 影视
计算器 行情 加解密 长度 面积
首页 软件 编程 笑话 知识 公告 注册 登录 用QQ登录本站
文明驾车我带头,文明行路我带头,礼貌让座我带头      

[公益] 节省一分零钱 献出一份爱心 温暖世间真情      
广告位招租中
2021年 春 节 23
2021年 情人节 25
2021年 元宵节 37
2022年 元 旦 346
全部 综合数码金融娱乐服务报刊政府机构 推荐 申请 友情  
  • 您现在的位置:首页 >> JS >> 内容

    原生js实现弹窗消息动画

    内容摘要: !DOCTYPE htmlhtml lang='en'headmeta charset='UTF-8'meta name='viewport' content='width=device-width, initial-scale=1.0'title动画消息弹窗/title/headstyle.message { -webkit-box-sizing: bor......

      <!DOCTYPE html>

    <html lang="en">

    <head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>动画消息弹窗</title>

    </head>

    <style>

    .message {

    -webkit-box-sizing: border-box;

    box-sizing: border-box;

    margin: 0;

    padding: 0;

    color: rgba(0, 0, 0, 0.85);

    font-size: 14px;

    font-variant: tabular-nums;

    line-height: 1.5715;

    list-style: none;

    -webkit-font-feature-settings: 'tnum';

    font-feature-settings: 'tnum';

    position: fixed;

    top: 8px;

    left: 0;

    z-index: 1010;

    width: 100%;

    pointer-events: none;

    }


    .message-notice {

    padding: 8px;

    text-align: center;


    -webkit-animation-name: MessageMoveOut;

    animation-name: MessageMoveOut;

    -webkit-animation-duration: 0.3s;

    animation-duration: 0.3s;

    }


    .message-content {

    color: #52c41a;

    display: inline-block;

    padding: 10px 16px;

    background: #fff;

    border-radius: 2px;

    -webkit-box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);

    box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);

    pointer-events: all;

    }


    @-webkit-keyframes MessageMoveOut {

    0% {

    max-height: 0;

    padding: 0;

    opacity: 0;

    }

    100% {

    max-height: 150px;

    padding: 8px;

    opacity: 1;

    }

    }

    @keyframes MessageMoveOut {

    0% {

    max-height: 0;

    padding: 0;

    opacity: 0;

    }

    100% {

    max-height: 150px;

    padding: 8px;

    opacity: 1;

    }

    }

    </style>

    <body style="text-align: center;">

    <div style="margin: 100px 500px;text-align: right;">

    <a href="#" rel="external nofollow" onclick="handleMessage()">点击弹窗</a>

    </div>


    <div class="message" id="message"></div>


    <script>

    const msg = "我是弹框消息";

    // 弹窗消息

    function handleMessage(message = msg) {

    const parentDiv = document.createElement("div");

    const div = document.createElement("div");

    div.className = "message-content";

    div.innerHTML = message;

    parentDiv.appendChild(div);

    parentDiv.className = "message-notice";

    document.getElementById("message").appendChild(parentDiv);


    setTimeout(() => {

    parentDiv.remove();

    }, 2000);

    }

    </script>

    </body>

    </html>

      版权声明:本内容来源于脚本之家,如有侵犯您的版权,请联系站长,本站收到您的信息后将及时处理。


    发布日期:2020/11/20 发布时间:16:33:30 点击:430 录入:齐天大圣
  • 上一篇:JavaScript实现网页tab栏效果制作
  • 下一篇:JavaScript实现鼠标经过表格某行时此行变色
  • 本类新增
    本类热门文章
    Baidu

    YiJiaCMS V3.88 Build 20.12.22(MSSQL) 闽ICP备05000814号-1
    本空间由景安网络提供,百度云加速提供加速防护
    齐天大圣® 制 作 ©2000-2021