关于遮罩层的使用！求助！

代码如下

<!--遮罩层-->  
        <div class="mui-backdrop">  
            <div class="querywrap">  
                <h3>查询</h4>  
                <form class="mui-input-group">  
                    <div class="mui-input-row">  
                        <label>起始时间</label>  
                        <input type="date" placeholder="">  
                    </div>  
                    <div class="mui-input-row">  
                        <label>结束时间</label>  
                        <input type="date"></span>  
                    </div>  
                </form>  
                <div class="mui-button-row">  
                    <button type="button" class="mui-btn mui-btn-primary">查询</button>&nbsp;&nbsp;  
                    <button type="button" class="mui-btn">取消</button>  
                </div>  
            </div>  
        </div>  
<!--/遮罩层-->

我想实现的效果是当文档加载完成后这个遮罩层是隐藏的，然后我点击某个按钮后。再弹出遮罩层，。
我js菜蛋一某！官方文档也是看的云雾里。
求大神告知方法。并带上demo！ 谢谢了！
急急急！