weui/src/example/toast/toast.html

A UI library by WeChat official design team, includes the most useful widgets/modules in mobile web applications.

<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:" role="button" class="weui-btn weui-btn_default" id="showToast">成功提示</a>
        <a href="javascript:" role="button" class="weui-btn weui-btn_default" id="showWarnToast">失败提示</a>
        <a href="javascript:" role="button" class="weui-btn weui-btn_default" id="showTextMoreToast">长文案提示</a>
        <a href="javascript:" role="button" class="weui-btn weui-btn_default" id="showLoadingToast">正在加载提示</a>
        <a href="javascript:" role="button" class="weui-btn weui-btn_default" id="showTextToast">文字提示</a>
    </div>

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

    <!--BEGIN toast-->
    <div role="alert" id="textMoreToast" style="display: none;">
        <div class="weui-mask_transparent"></div>
        <div class="weui-toast__wrp">
          <div class="weui-toast weui-toast_text-more">
              <i class="weui-icon-warn weui-icon_toast"></i>
              <p class="weui-toast__content">长文案提示详情，长文案提示详情，长文案提示详情</p>
          </div>
        </div>
    </div>

    <!--BEGIN toast-->
    <div role="alert" id="warnToast" style="display: none;">
        <div class="weui-mask_transparent"></div>
        <div class="weui-toast__wrp">
          <div class="weui-toast">
              <i class="weui-icon-warn weui-icon_toast"></i>
              <p class="weui-toast__content">获取链接失败</p>
          </div>
        </div>
    </div>

    <!-- loading toast -->
    <div role="alert" id="loadingToast" style="display: none;">
        <div class="weui-mask_transparent"></div>
        <div class="weui-toast__wrp">
          <div class="weui-toast">
              <span class="weui-primary-loading weui-icon_toast">
                <span class="weui-primary-loading__dot"></span>
              </span>
              <p class="weui-toast__content">正在加载</p>
          </div>
        </div>
    </div>

    <!-- text toast -->
    <div role="alert" id="textToast" style="display: none;">
        <div class="weui-mask_transparent"></div>
        <div class="weui-toast__wrp">
          <div class="weui-toast weui-toast_text">
              <p class="weui-toast__content">文字提示</p>
          </div>
        </div>
    </div>
</div>
<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);
        });
    });

    // warn
    $(function(){
        var $warnToast = $('#warnToast');
        $('#showWarnToast').on('click', function(){
            if ($warnToast.css('display') != 'none') return;

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

    // text-more
    $(function(){
        var $textMoreToast = $('#textMoreToast');
        $('#showTextMoreToast').on('click', function(){
            if ($textMoreToast.css('display') != 'none') return;

            $textMoreToast.fadeIn(100);
            setTimeout(function () {
                $textMoreToast.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);
        });
    });

    // text
    $(function(){
        var $textToast = $('#textToast');
        $('#showTextToast').on('click', function(){
            if ($textToast.css('display') != 'none') return;

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