功能如題，接下來思路如下：
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 });
在此記述了實現該功能的一種思路，拋磚引玉，如果你有更好的思路，歡迎留言共勉。