weui/src/example/actionsheet/actionsheet.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">ActionSheet</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="showIOSActionSheet">ActionSheet</a>
    </div>
    <!--BEGIN actionSheet-->
    <div>
        <div class="weui-mask" id="iosMask" style="display: none;"></div>
        <div role="dialog" aria-modal="true" tabindex="0" aria-hidden="true" class="weui-actionsheet" id="iosActionsheet">
            <div class="weui-actionsheet__title">
                <p class="weui-actionsheet__title-text">这是一个标题，可以为一行或者两行。</p>
            </div>
            <div class="weui-actionsheet__menu">
                <div id="current1" tabindex="0" role="button" class="weui-actionsheet__cell">示例菜单</div>
                <div role="button" tabindex="0" class="weui-actionsheet__cell weui-actionsheet__cell_tips">
                  示例菜单
                  <div class="weui-actionsheet__cell__tips">副标题</div>
                </div>
                <div role="button" tabindex="0" class="weui-actionsheet__cell weui-actionsheet__cell_warn">负向菜单</div>
            </div>
            <div class="weui-actionsheet__action">
                <div role="button" tabindex="0" class="weui-actionsheet__cell" id="iosActionsheetCancel">取消</div>
            </div>
        </div>
    </div>

    <div role="dialog" aria-modal="true" aria-hidden="true" class="weui-skin_android" id="androidActionsheet" style="display: none;">
        <div id="androidClose" tabindex="0" role="option" aria-label="关闭" class="weui-mask"></div>
        <div class="weui-actionsheet">
            <div class="weui-actionsheet__menu">
                <div tabindex="0" role="button" class="weui-actionsheet__cell">示例菜单</div>
                <div tabindex="0" role="button" class="weui-actionsheet__cell">示例菜单</div>
                <div tabindex="0" role="button" class="weui-actionsheet__cell">示例菜单</div>
            </div>
        </div>
    </div>
    <!--END actionSheet-->
</div>
<script type="text/javascript">
    // ios
    $(function(){
        var $iosActionsheet = $('#iosActionsheet');
        var $iosMask = $('#iosMask');

        function hideActionSheet() {
            $iosActionsheet.removeClass('weui-actionsheet_toggle').attr('aria-hidden','true');
            $iosMask.fadeOut(200);
            $('#showIOSActionSheet').trigger('focus');
        }

        $iosMask.on('click', hideActionSheet);
        $('#iosActionsheetCancel').on('click', hideActionSheet);
        $("#showIOSActionSheet").on("click", function(){
            $iosActionsheet.attr('aria-hidden','false').addClass('weui-actionsheet_toggle');
            $iosMask.fadeIn(200);
            setTimeout(function(){
              $('#current1').trigger('focus');
            },200)
        });
    });

    // android
    $(function(){
        var $androidActionSheet = $('#androidActionsheet');

        $("#showAndroidActionSheet").on('click', function(){
            $androidActionSheet.attr('aria-hidden','false').fadeIn(200);
            setTimeout(function(){
              $('#androidClose').trigger('focus');
            },200)
        });
        $('#androidClose').on('click',function () {
          $androidActionSheet.attr('aria-hidden','true').fadeOut(200);
          $('#showAndroidActionSheet').trigger('focus');
        });

    });
</script>