手动实现移动端确认框（阿里开源的SUI Mobile框架的操作表）-优快云博客

本文介绍如何不依赖完整框架，仅实现移动端确认操作表功能。通过CSS3动画实现操作表的滑动显示与隐藏，增强用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

翻看几个前端的移动框架，发现各有千秋，不过现在好像不用框架都不好意思说自己是做移动端的。其实不然，个人在移动端由于刚刚起步，暂时没用上框架。不过有时候我会仿照框架写几个需要的组件，比如说这个：

由于只是需要框架的几个功能，为了节省流量，优化网页加载，所以不需要把整个框架引入，简单把功能实现。
本文就介绍一下怎样实现阿里开源的SUI Mobile框架的操作表，点击查看原版
喜欢的来原文看看

1.基本思路

1.1 概述

用户点击某些操作按钮，比如，删除、添加、修改时，为了防止用户操作错误，往往需要用户再次进行确认，防止用户重要信息被误操作。移动端比较好的体验效果就是这样的操作单，从在屏幕下方滑出显示，取消时”沿路返回“。在屏幕下方是应为操作方便，毕竟是移动端，大拇指很容易操作到。

1.3 js设计原理

点击出现，点击取消再次隐藏，PC端很容易实现，移动端一样；需要说明的是这里的遮罩层和操作单（操作单就是出现的那块操作区）都是单独，单独放在html标签之间，没有嵌套关系。操作表的出现方式是淡入向上滑动，隐藏方式是淡出向下滑动，这里最好的办法就是CSS3动画实现，没毛病。

贴上代码，一一介绍

2.代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
<!--    使用rem作布局方式时，视口的设置很有必要-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
    <meta content="yes" name="apple-mobile-web-app-capable" />
    <meta name="apple-mobile-web-app-status-bar-style" content="blank">
    <meta content="telephone=no" name="format-detection" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="keywords" content="xx,xx,xx" />
    <meta name="description" content="yyyyyyy" />
<!--    <script src="./js/faskclick.js"></script>-->
<!--   引入自己封装的rem.js文件-->
    <script src="./js/rem.js"></script>
    <script src="./js/jquery-1.11.1.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .mask {
            width: 100%;
            height: 100%;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 9;
            background: rgba(0, 0, 0, 0.6);
            display: none;
        }
        
        .wrap {
            width: 99%;
            height: 7rem;
            position: fixed;
            bottom: 2px;
            left: 0.5%;
            right: 0;
            z-index: 10;
            background: #FFF;
            border-radius: 5px;
            display: none;
        }
        
        .wrap div {
            box-sizing: border-box;
            -webkit-box-sizing: border-box;
            border-top: 1px solid #333;
        }
        
        .wrap .div-title {
            width: 100%;
            height: 3rem;
            text-align: center;
            line-height: 3rem;
        }
        
        .wrap .div-btn {
            width: 100%;
            height: 2rem;
            text-align: center;
            line-height: 2rem;
        }
        
        .pass {
            background: green;
            color: aliceblue;
        }
        
        .close {
            background: red;
            color: aliceblue;
        }
        /*  预设动画*/
        .animated {
            -webkit-animation-duration: .5s;
            animation-duration: .5s;
            -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
        }
        
        @-webkit-keyframes fadeInUp {
            from {
                opacity: 0;
                -webkit-transform: translate3d(0, 100%, 0);
                transform: translate3d(0, 100%, 0);
            }
            to {
                opacity: 1;
                -webkit-transform: none;
                transform: none;
            }
        }
        
        @keyframes fadeInUp {
            from {
                opacity: 0;
                -webkit-transform: translate3d(0, 100%, 0);
                transform: translate3d(0, 100%, 0);
            }
            to {
                opacity: 1;
                -webkit-transform: none;
                transform: none;
            }
        }
        .fadeInUp {
            -webkit-animation-name: fadeInUp;
            animation-name: fadeInUp;
        }
        
        @-webkit-keyframes fadeOutDown {
            from {
                opacity: 1;
            }
            to {
                opacity: 0;
                -webkit-transform: translate3d(0, 100%, 0);
                transform: translate3d(0, 100%, 0);
            }
        }
        
        @keyframes fadeOutDown {
            from {
                opacity: 1;
            }
            to {
                opacity: 0;
                -webkit-transform: translate3d(0, 100%, 0);
                transform: translate3d(0, 100%, 0);
            }
        }
        
        .fadeOutDown {
            -webkit-animation-name: fadeOutDown;
            animation-name: fadeOutDown;
        }
    </style>
</head>

<body>
    <button class="haha">点击</button>
    <div class="mask" id="mask"></div>
    <div class="wrap animated">
        <div class="div-title">您确定要删除我么？</div>
        <div class="div-btn pass">确认</div>
        <div class="div-btn close">取消</div>
    </div>
    <script>
        //点击按钮，遮罩层先出现，淡出淡入在视觉上好一些，操作表向上滑动出现
        $('.haha').bind('click', function() {
            $('#mask').fadeIn();
    //操作表向上滑动出现,先显示操作表（display:block），移除预设动画类'fadeOutDown',再添加预设动画类’fadeInUp‘
            $('.wrap').show().removeClass('fadeOutDown').addClass('fadeInUp');
        });
        //点击取消按钮，操作表向下滑动隐藏，‘delay(500)’可以防止操作表在视觉上还没向下滑动就隐藏掉的问题，
        $('.close').bind('click', function() {
    //操作表向下滑动隐藏,先移除预设动画类'fadeInUp',再添加预设动画类’fadeOutDown‘，最后隐藏操作表（display:none），
            $('.wrap').removeClass('fadeInUp').addClass('fadeOutDown').delay(500).hide(0);
            //然后遮罩层晚操作表隐藏
            $('#mask').fadeOut();
        })
//（’display:block‘和’display:none‘只做说明）
    </script>

</body>
</html>