功能如题，接下来思路如下：
1：首先需要一个遮罩层，遮罩层需要遮挡住页面的整个内容，使得页面不可用。于是就有了一个遮罩层，新增一个样式给遮罩层，使用半透明的样式 1 .coverDiv{
2 display: none;
3 position: fixed;
4 top: 0;
5 left: 0;
6 width: 100%;
7 height: 100%;
8 background-color: rgb(47, 79, 79);
9 opacity: 0.6;
10 filter: alpha(opacity = 60);/*半透明兼容*/
11 }
2：接下来要有一个滚动的块元素。于是就有了一个块元素，样式如下 1 .msgDiv {
2 display: none;
3 border-top-left-radius: 8px;/*注意IE*/
4 border-bottom-left-radius: 8px;
5 position: fixed;
6 right: -300px;
7 width: 300px;
8 height: 400px;
9 top: 50%;
10 margin-top: -200px;
11 background-color: #fff;
12 }
3:水平的滑动，可以使用jQuery提供的animate方法，控制元素的margin-left或者margin-right来实现
1 //提示信息呈现
2 $("触发提示信息呈现的元素").click(function(){
3 $(".coverDiv").fadeIn(200);
4 $(".msgDiv").css("display","block");
5 $(".msgDiv").animate({
6 marginRight:'300'
7 },300);
8 });
9
10 //点击遮罩层，提示信息隐藏
11 $(".coverDiv").click(function(){
12 $(".coverDiv").fadeOut(200);
13
14 $(".msgDiv").css("display","block");
15 $(".msgDiv").animate({
16 marginRight:'-=300'
17 },300);
18 });
在此记述了实现该功能的一种思路，抛砖引玉，如果你有更好的思路，欢迎留言共勉。