webapp上的蒙版，包含使用touchstart,touchmove

最近很想做一个像美团上点击分类或地址，后面的背景变黑，下拉菜单提亮的效果。如下图

其实做个蒙版很容易拉，这是CSS的写法。 .mban{position:fixed;z-index:16;top:0;left:0;width:100%;height:100%;background:#000;filter:alpha(opacity=50);-moz-opacity:0.5;opacity:0.5;}

有一点需要注意，就是position:fixed，如果不加入这条，你会发现你的蒙版只是一个屏幕的大小，当你往下活动屏幕时就没有蒙版了。所以就把蒙版固定了，这样滑动屏幕的时候，蒙版还一直显示在页面上。

主要就再看点击的时候显示下拉菜单和蒙版。我是用jQuery控制的，主要就是先隐藏下拉菜单即设定其display为none,当点击分类的时候，出现下拉菜单和蒙版，而当手点击蒙版或者滑动的时候，下拉菜单和蒙版同时消失。

因为是手机webapp我使用了touchstart和touchmove，自我感觉touchstart在手机上触发比click好，其实click是一样的。一开始使用mousemove，发现手指在屏幕上移动是不会触发mousemove，这个应该只适用于pc网页

$(document).ready(function(){    $("#category").bind('touchstart', function(event){        if($("#show").css("display") == "none"){            $("#mban").addClass("mban");//添加蒙版样式            $("#show").css("display","inline");//显示下拉列表，我用ul写的            $("#show").addClass("show");//下拉菜单的位置样式等        }else{//当已经有下拉菜单时，点击则菜单与蒙版消失，分别移除样式并隐藏菜单            $("#mban").removeClass("mban");            $("#show").removeClass("show");            $("#show").css("display","none");        }    });    $("#mban").bind('touchstart', function(event){//点击蒙版时，下拉菜单与蒙版消失，分别移除样式并隐藏菜单        $("#mban").removeClass("mban");        $("#show").removeClass("show");        $("#show").css("display","none");    });    $("#mban").bind('touchmove', function(event){//在蒙版处滑动屏幕时，下拉菜单与蒙版消失，分别移除样式并隐藏菜单        $("#mban").removeClass("mban");        $("#show").removeClass("show");        $("#show").css("display","none");    });});