WeUI——彈出式提示Toast

前端：

文章來源：https://weui.io/#toast

CSS、JS下載地址：

　　weui.css：https://blog-static.cnblogs.com/files/ZM191018/weui.css

　　weui.min.js：https://blog-static.cnblogs.com/files/ZM191018/weui.min.js

　　weui.min.js：https://blog-static.cnblogs.com/files/ZM191018/weui.min.js

引入CSS樣式、JS腳本文件

要注意：在引用路徑下必須找得到對應的CSS樣式文件或者JS腳本文件，否則會異常。

<link rel="stylesheet" href="\js\weui\weui.css">
<script src="\js\weui\jquery.min.js"></script>
<script src="\js\weui\weui.min.js"></script>

HTML代碼

<div class="page">
    <div class="page__hd">
        <h1 class="page__title">Toast</h1>
        <p class="page__desc">彈出式提示</p>
    </div>
    <div class="page__bd page__bd_spacing">
        <a href="javascript:" class="weui-btn weui-btn_default" id="showToast">成功提示</a>
        <a href="javascript:" class="weui-btn weui-btn_default" id="showLoadingToast">加載中提示</a>
    </div>

    <!--BEGIN toast-->
    <div id="toast" style="display: none;">
        <div class="weui-mask_transparent"></div>
        <div class="weui-toast">
            <i class="weui-icon-success-no-circle weui-icon_toast"></i>
            <p class="weui-toast__content">已完成</p>
        </div>
    </div>
    <!--end toast-->

    <!-- loading toast -->
    <div id="loadingToast" style="display: none;">
        <div class="weui-mask_transparent"></div>
        <div class="weui-toast">
            <i class="weui-loading weui-icon_toast"></i>
            <p class="weui-toast__content">數據加載中</p>
        </div>
    </div>
</div>

 

JS事件

<script type="text/javascript">
    // toast
    $(function(){
        var $toast = $('#toast');
        $('#showToast').on('click', function(){
            if ($toast.css('display') != 'none') return;

            $toast.fadeIn(100);
            setTimeout(function () {
                $toast.fadeOut(100);
            }, 2000);
        });
    });

    // loading
    $(function(){
        var $loadingToast = $('#loadingToast');
        $('#showLoadingToast').on('click', function(){
            if ($loadingToast.css('display') != 'none') return;

            $loadingToast.fadeIn(100);
            setTimeout(function () {
                $loadingToast.fadeOut(100);
            }, 2000);
        });
    });
</script>

 

演示