Toast

成功提示

            <a href="javascript:;" class="mx-btn mx-btn_default" id="showToast">成功提示</a>
             <div id="toast" style="display: none;">
                <div class="mx-mask_transparent"></div>
                <div class="mx-toast">
                    <i class="mx-icon-success-no-circle mx-icon_toast"></i>
                    <p class="mx-toast__content">已完成</p>
                </div>
            </div>
            <script>
                // toast
                $(function(){
                    var $toast = $('#toast');
                    $('#showToast').on('click', function(){
                        if ($toast.css('display') != 'none') return;
                        $toast.fadeIn(100);
                        setTimeout(function () {
                            $toast.fadeOut(100);
                        }, 2000);
                    });
                });
            </script>
        

加载中提示

            <a href="javascript:;" class="mx-btn mx-btn_default" id="showLoadingToast">加载中提示</a>
            <div id="loadingToast" style="display:none;">
                <div class="mx-mask_transparent"></div>
                <div class="mx-toast">
                    <i class="mx-loading mx-icon_toast"></i>
                    <p class="mx-toast__content">数据加载中</p>
                </div>
            </div>
            <script>
                // 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>