ActionSheet

      <a href="javascript:;" class="mx-btn mx-btn_default" id="showIOSActionSheet">iOS ActionSheet</a>
            <!--BEGIN actionSheet-->
            <div>
                <div class="mx-mask" id="iosMask" style="display: none"></div>
                <div class="mx-actionsheet" id="iosActionsheet">
                    <div class="mx-actionsheet__title">
                        <p class="mx-actionsheet__title-text">这是一个标题，可以为一行或者两行。</p>
                    </div>
                    <div class="mx-actionsheet__menu">
                        <div class="mx-actionsheet__cell">示例菜单</div>
                        <div class="mx-actionsheet__cell">示例菜单</div>
                        <div class="mx-actionsheet__cell">示例菜单</div>
                        <div class="mx-actionsheet__cell">示例菜单</div>
                    </div>
                    <div class="mx-actionsheet__action">
                        <div class="mx-actionsheet__cell" id="iosActionsheetCancel">取消</div>
                    </div>
                </div>
            </div>
            <script>
                $(function(){
                    var $iosActionsheet = $('#iosActionsheet');
                    var $iosMask = $('#iosMask');

                    function hideActionSheet() {
                        $iosActionsheet.removeClass('mx-actionsheet_toggle');
                        $iosMask.fadeOut(200);
                    }

                    $iosMask.on('click', hideActionSheet);
                    $('#iosActionsheetCancel').on('click', hideActionSheet);
                    $("#showIOSActionSheet").on("click", function(){
                        $iosActionsheet.addClass('mx-actionsheet_toggle');
                        $iosMask.fadeIn(200);
                    });
                });
            </script>
        

      <a href="javascript:;" class="mx-btn mx-btn_default" id="showAndroidActionSheet">Android ActionSheet</a>
            <div class="mx-skin_android" id="androidActionsheet" style="display: none">
                <div class="mx-mask"></div>
                <div class="mx-actionsheet">
                    <div class="mx-actionsheet__menu">
                        <div class="mx-actionsheet__cell">示例菜单</div>
                        <div class="mx-actionsheet__cell">示例菜单</div>
                        <div class="mx-actionsheet__cell">示例菜单</div>
                    </div>
                </div>
            </div>
            <script>
                 // android
                $(function(){
                    var $androidActionSheet = $('#androidActionsheet');
                    var $androidMask = $androidActionSheet.find('.mx-mask');
                    $("#showAndroidActionSheet").on('click', function(){
                        $androidActionSheet.fadeIn(200);
                        $androidMask.on('click',function () {
                            $androidActionSheet.fadeOut(200);
                        });
                    });
                });
            </script>