功能如題，接下來思路如下：
1：首先需要一個(gè)遮罩層，遮罩層需要遮擋住頁(yè)面的整個(gè)內(nèi)容，使得頁(yè)面不可用。于是就有了一個(gè)遮罩層，新增一個(gè)樣式給遮罩層，使用半透明的樣式 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：接下來要有一個(gè)滾動(dòng)的塊元素。于是就有了一個(gè)塊元素，樣式如下 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:水平的滑動(dòng)，可以使用jQuery提供的animate方法，控制元素的margin-left或者margin-right來實(shí)現(xiàn)
1 //提示信息呈現(xiàn)
2 $("觸發(fā)提示信息呈現(xiàn)的元素").click(function(){
3 $(".coverDiv").fadeIn(200);
4 $(".msgDiv").css("display","block");
5 $(".msgDiv").animate({
6 marginRight:'300'
7 },300);
8 });
9
10 //點(diǎn)擊遮罩層，提示信息隱藏
11 $(".coverDiv").click(function(){
12 $(".coverDiv").fadeOut(200);
13
14 $(".msgDiv").css("display","block");
15 $(".msgDiv").animate({
16 marginRight:'-=300'
17 },300);
18 });
在此記述了實(shí)現(xiàn)該功能的一種思路，拋磚引玉，如果你有更好的思路，歡迎留言共勉。