利用jquery+css实现侧边栏弹出搜索

先上效果图：

先上html代码

<div id="mask" class="mask" onclick="javascript:hideQueryFilter()"></div>  
 <div id="filter_box" class="filter_box"> 
    <form name="myform" id="myform" action="" method="post" style="margin-top: 64px;">
        <div id="filter_div" class="filter_div"> 
            <!-- 筛选条件  -->
        </div> 
        <div class="filter_div" style="text-indent:1em;clear:both;margin-top: 10px;">
            <i class="select_icon headerImg_size" style="width: 40%; height: 40%;margin-top: 10px;" onclick="javascript:queryFilter()"></i>
            <a type="button" style="cursor: pointer;margin-left:38%;width:75px;" onClick='javascript:query();' class="a_button"><img src="../img/select.png"><span>查询</span></a>
            <a type="button" style="cursor: pointer;margin-left:8%;color: #00A2E8;font-size: 14px;line-height: 40px;"  id="clear">重置</a>
        </div> 
    </form> 
</div>

弹出框很简单，主要是用到了css，点击右上方的搜索按钮执行jquery方法，上面的代码两部分，一部分是mask即百分之宽度20的蒙层，宽度百分之80的搜索条件，进入列表页面这两个div的display都是none，点击搜索时，diaplay设置为block，
其次mask和filter_box的z-index的值要大于列表中z-index的值，列表中z-index的值不设置的话默认是0，这是两点重要的，
其次就是div的定位，我这里的定位是position：fixed，也可以设置为absolute，这个看个人需求，
还有一点就是蒙层的透明度，属性值是opacity，1最大，0最小
下面是两个div的css属性：

/* 百分之20蒙层 */
.mask {       
       position: absolute;
       top: 0px; 
       filter: alpha(opacity=60); 
       background-color: #777;     
       z-index: 3; 
       left: 0px; 
       top:0px;   
       opacity:0.5;
       -moz-opacity:0.5; 
} 
/* 百分之80弹出框  */
.filter_box { 
       position: absolute; 
       filter: alpha(opacity=60); 
       background-color: white;     
       z-index: 3;
       top:0px;   
       opacity:1; -moz-opacity:1;
       color: #434a54;   
       display: none;   
} 

jquery代码：

    function queryFilter(){  
        $("#contract").css("overflow-y","hidden");
        $("#contract").css("position","fixed");
        $("#contract").css("width","100%");
        $("#contract").css("max-width","480px");
        $("#mask").css("height",$(window).height());     
        $("#mask").css("width","20%");      
        $("#mask").show(); 
        $("#filter_box").css("left","20%");  
        $("#filter_box").css("width","80%");
        $("#filter_box").css("height",$(window).height());
        $("#filter_box").show();  
        $("#search").attr("onclick","javascript:void()");
        $("#footer").css("display","none");
        isPop=true;
    }

此文仅仅介绍如何实现这个效果，代码复制过去效果可能并不如意，还需要自己理解以后再调试的呢。