怎样用JAVASCRIP制作类似QQ消息的弹出窗效果
1、 前端用到的编辑器有很多，本例通过选择Dreamweaver CS6编辑器来制作类似QQ消息的弹出窗效果。第一步，打开电脑中安装的Dreamweaver CS6，新建demo文件夹用来存放文件，在里面新建一个html文件，并命名标题。如图：
2、 第二步，写HTML代码。加一个按钮，用来出发点击事件；加一个DIV，用来存放弹框。代码如下：
<input type="button" value="QQ消息" id="showMsg" />
<div id="msgQQ"></div>
3、 第三步，在顶部head标签里引入CSS文件（由于本例比较简单，选择在style标签中写）。接着，下载好相关的库文件后，我们将JQuery文件放在Body标签底部。注意要引入jQuery库，不然你写的JQuery不会有效果的。如图：
4、 第四步，写相关CSS代码。其中，div msgQQ样式，“position: fixed;right: 0px;bottom: 0px;”是用来将此div固定在右下角的位置。相关的CSS代码如下：
body {
height: 1000px;
}
#msgQQ {
border:1px solid #000;
width: 300px;
height: 200px;
position: fixed; /*固定div标签*/
right: 0px;
bottom: 0px;
background-color: red;
}
5、 第五步，写JQuery代码。先定义一个关闭弹窗的函数。表示弹框在点击出发3秒后隐藏弹框。相关的代码如下：
function close() {
setTimeout(function () {
$("#msgQQ").slideUp(); //3秒后隐藏弹框
}, 3000);
}
6、 第六步，将要执行的函数写在$(function (){}中，表示dom加载完后执行。页面载入时，div默认是隐藏的；点击按钮后，3秒时间显示弹框后调用close函数，即弹出3秒后消失。相关的代码如下：
$(function () {
$("#msgQQ").hide();
$("#showMsg").click(function () {
$("#msgQQ").slideDown(3000, close); //3秒时间显示弹框后调用close函数
});
});
7、 第七步，JQuery代码完成。于是，就实现了简单的QQ消息的弹出窗效果了。我们点击上面的“在浏览器中预览”图标，查看效果（其实每写完一步代码就应该查看效果，即调试）。完整的JQuery代码如下图：
<script language="javascript" type="text/javascript">
$(function () {
$("#msgQQ").hide();
$("#showMsg").click(function () {
$("#msgQQ").slideDown(3000, close); //3秒时间显示弹框后调用close函数
});
});
function close() {
setTimeout(function () {
$("#msgQQ").slideUp(); //3秒后隐藏弹框
}, 3000);
}
</script>
8、 最后，在浏览器中查看效果。可以看到，我们点击按钮，会慢慢弹出一个红色的弹框，三秒后消失。如图所示，读者可以自行实践。
附：本经验关键词：Dreamweaver CS6制作QQ消息的弹出窗、怎样用JAVASCRIP制作QQ消息的弹出窗、HTML/CSS制作、QQ消息、弹框、网站制作、网页制作、Dreamweaver 、JAVASCRIPT。
