手动实现移动端确认框（阿里开源的SUI Mobile框架的操作表）

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

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

1.基本思路

1.1 概述

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

1.3 js设计原理

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

贴上代码，一一介绍

2.代码

    
    

    
    
    
    
    
    
    


    
    
    



    点击
    

    

        
您确定要删除我么？
        
确认
        
取消
    
    

3、补充说明

对于动画的实现，自己做也是没问图，博主比较懒，拿现成的省时省力。大家应该都知道animate.css.你可以选择全部拿下来整个引用。怕冗余代码多的话，我教你拿出你需要的代码。
1.确定你需要的效果，博主需要淡入向上滑动，和淡出向下滑动，如下

2.然后下载下来整个animate.css类库文件，打开找到相应的类名fadeInUp、fadeOutDown

3.复制粘贴出来，放在自己的css文件中，还没完，必须把’animated‘类也拿出来，放在动画代码的前面（必须）

4.需要动画的div，要预先添加’animated‘，再添加相应的动画类，比如’fadeInUp‘
这样以后就可以随意使用动画了