zoukankan      html  css  js  c++  java
  • H5_0034:toast提示

    html:

    <button id="showToast">此按钮是测试toast的例子</button>

    CSS:

            /*手机*/
            @media screen and (max-600px) {
    
    
                /* toast start */
                @-webkit-keyframes toastAnimation {
                    0% {
                        opacity: 1;
                    }
    
                    25% {
                        opacity: 0.75;
                    }
    
                    50% {
                        opacity: 0.5;
                    }
    
                    75% {
                        opacity: 0.25;
                    }
    
                    100% {
                        opacity: 0;
                    }
                }
    
                @keyframes toastAnimation {
                    0% {
                        opacity: 1;
                    }
    
                    25% {
                        opacity: 0.75;
                    }
    
                    50% {
                        opacity: 0.5;
                    }
    
                    75% {
                        opacity: 0.25;
                    }
    
                    100% {
                        opacity: 0;
                    }
                }
    
                .toast-message {
                    text-align: center;
                    color: #fff;
                    font-size: 16px;
                    width: 50%;
                    padding: 10px 0;
                    background-color: rgba(0, 0, 0, 0.5);
                    box-shadow: 0 8px 16px 0 rgba(51, 51, 51, 0.30);
                    border-radius: 8px;
                    position: fixed;
                    z-index: 9999;
                    left: 25%;
                    /*-webkit-animation:toastAnimation 1.5s ease-in 0s 1 normal;
                    */
                    /*animation:toastAnimation 1.5s ease-in 0s 1 normal;
                    */
                }
    
                /* toast end */
    
            }
    
    
    
    
            /*平板*/
            @media screen and (min-600px) and (max-960px) {
    
                /* toast start */
                @-webkit-keyframes toastAnimation {
                    0% {
                        opacity: 1;
                    }
    
                    25% {
                        opacity: 0.75;
                    }
    
                    50% {
                        opacity: 0.5;
                    }
    
                    75% {
                        opacity: 0.25;
                    }
    
                    100% {
                        opacity: 0;
                    }
                }
    
                @keyframes toastAnimation {
                    0% {
                        opacity: 1;
                    }
    
                    25% {
                        opacity: 0.75;
                    }
    
                    50% {
                        opacity: 0.5;
                    }
    
                    75% {
                        opacity: 0.25;
                    }
    
                    100% {
                        opacity: 0;
                    }
                }
    
                .toast-message {
                    text-align: center;
                    color: #fff;
                    font-size: 20px;
                    width: 50%;
                    padding: 10px 0;
                    background-color: rgba(0, 0, 0, 0.5);
                    box-shadow: 0 8px 16px 0 rgba(51, 51, 51, 0.30);
                    border-radius: 8px;
                    position: fixed;
                    z-index: 9999;
                    left: 25%;
                    /*-webkit-animation:toastAnimation 1.5s ease-in 0s 1 normal;
                    */
                    /*animation:toastAnimation 1.5s ease-in 0s 1 normal;
                    */
                }
    
                /* toast end */
    
            }
    
    
    
            /*PC*/
            @media screen and (min-960px) {
    
    
                /* toast start */
                @-webkit-keyframes toastAnimation {
                    0% {
                        opacity: 1;
                    }
    
                    25% {
                        opacity: 0.75;
                    }
    
                    50% {
                        opacity: 0.5;
                    }
    
                    75% {
                        opacity: 0.25;
                    }
    
                    100% {
                        opacity: 0;
                    }
                }
    
                @keyframes toastAnimation {
                    0% {
                        opacity: 1;
                    }
    
                    25% {
                        opacity: 0.75;
                    }
    
                    50% {
                        opacity: 0.5;
                    }
    
                    75% {
                        opacity: 0.25;
                    }
    
                    100% {
                        opacity: 0;
                    }
                }
    
                .toast-message {
                    text-align: center;
                    color: #fff;
                    font-size: 22px;
                    width: 26%;
                    padding: 10px 0;
                    background-color: rgba(0, 0, 0, 0.5);
                    box-shadow: 0 8px 16px 0 rgba(51, 51, 51, 0.30);
                    border-radius: 8px;
                    position: fixed;
                    z-index: 9999;
                    left: 37%;
                    /*-webkit-animation:toastAnimation 1.5s ease-in 0s 1 normal;
                        */
                    /*animation:toastAnimation 1.5s ease-in 0s 1 normal;
                        */
                }
    
                /* toast end */
    
            }

    js:

    $("#showToast").click(function() {
        toastMsg('toast提示成功');
    });
    
    
    /* Toast --start */
    function toastMsg(msg) {
        if ($("div").is("#toastMessage")) {
            $("#toastMessage").remove();
        }
    
        var msgDiv = '<div id="toastMessage" class="toast-message">' +
            '<span>' + msg + '</span>' +
            '</div>';
        $("body").append(msgDiv);
    
        //set #toastMessage of top
        //计算屏幕的高度,并让toast提示框显示在屏幕的中间
        var screenHeight = window.innerHeight;
        var toastMessage = $("#toastMessage");
        var toastHeight = toastMessage.height();
        var top = (screenHeight / 2) - (toastHeight / 2) + "px";
        toastMessage.css("top", top);
    
        setTimeout(function() {
            $("#toastMessage").remove();
        }, 1500);
    }
    /* Toast --end */
    琥珀君的博客
  • 相关阅读:
    TableEx 控件 v1.0 [原创][免费][开源]
    js刷新页面
    SimpleAjax 开发包 v3.1 (简单的Ajax)
    oracle中的''空字符串和null居然是等价的
    HTTP 错误大全
    Ext2.0 form使用实例
    isqlweb (Web版 SQL Server 管理器)
    关于软件版本
    我的第一个C++程序——方块游戏 v1.0
    轻松实现UltraWebGrid中的分页控制
  • 原文地址:https://www.cnblogs.com/eliteboy/p/12499116.html
Copyright © 2011-2022 走看看