前端H5 Actionsheet操作菜單

<style>
        .ui-actionsheet {
            position: fixed;
            z-index: 9999;
            top: 0;
            left: 0;
            display: -webkit-box;
            width: 100%;
            height: 100%;
            pointer-events: none;
            opacity: 0;
            background: rgba(0, 0, 0, 0.4);
            -webkit-box-orient: horizontal;
            -webkit-box-pack: center;
            -webkit-box-align: end;
        }

        .ui-actionsheet:active {
            opacity: .84
        }

        .ui-actionsheet .ui-actionsheet-cnt {
            position: fixed;
            bottom: 0;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            width: 100%;
            -webkit-transition: all 0.2s linear;
            -webkit-transform: translate3d(0, 100%, 0);
            text-align: center;
            font-size: 21px
        }

        .ui-actionsheet .ui-actionsheet-cnt button {
            font-size: 18px
        }

        .ui-actionsheet button,
        .ui-actionsheet h4 {
            display: block;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            width: 100%;
            background: #fff;
            font-size: 14px
        }

        .ui-actionsheet h4 {
            color: #777
        }

        .ui-actionsheet button {
            color: #000;
            height: 50px;
            line-height: 50px
        }

        .ui-actionsheet button:not(:last-child) {
            border-top: 1px #e9e9e9 solid
        }

        .ui-actionsheet h4 {
            padding: 13px 20px;
            line-height: 24px;
            margin: 0;
        }

        .ui-actionsheet.show {
            pointer-events: inherit;
            opacity: 1
        }

        .ui-actionsheet.show .ui-actionsheet-cnt {
            -webkit-transition: all 0.2s linear;
            -webkit-transform: translate3d(0, 0, 0);
        }

        .ui-actionsheet-split-line {
            height: 10px;
            background-color: rgba(255, 255, 255, 0.7)
        }

        .ui-actionsheet .ui-actionsheet-del {
            color: #fd472b
        }

        @media screen and (-webkit-min-device-pixel-ratio: 2) {
            .ui-actionsheet button:not(:last-child) {
                border: 0;
                background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.5, transparent), color-stop(0.5, #e9e9e9), to(#e9e9e9));
                background-repeat: repeat-x;
                background-position: left top;
                -webkit-background-size: 100% 1px
            }
        }
    </style>

<div class="ui-btn-wrap" id="btn1">
     <button class="ui-btn-lg">Actionsheet</button>
</div>
<div class="ui-actionsheet" id="actionsheet1">
    <div class="ui-actionsheet-cnt am-actionsheet-down">
        <h4>ACTIONSHEET</h4>
        <button>分享</button>
        <button class="ui-actionsheet-del">刪除</button>
        <div class="ui-actionsheet-split-line"></div>
        <button id="cancel">取消</button>
    </div>
</div>

// 顯示
$("#btn1").click(function () {
    $('.ui-actionsheet').addClass('show');
});
// 隱藏
$("#cancel").click(function () {
    $(".ui-actionsheet").removeClass("show");
});