本文介绍如何使用jQuery实现一个右下角弹窗效果。通过设置div绝对定位、z-index及宽高，结合fadeIn和fadeOut方法实现淡入淡出动画。示例代码展示了弹窗初始化与关闭逻辑，适用于网页消息提醒场景。
弹窗效果概述
该弹窗效果如图所示：
页面加载时，弹窗以淡入方式出现；点击右上角关闭按钮（即×符号）时，弹窗以淡出方式消失。
选择淡入淡出效果是因为直接调用jQuery的fadeIn与fadeOut方法较为简便。若采用窗口从下向上移动的方式，则需处理div的position属性设置，这会引发一系列复杂的兼容性问题。
实现原理与依赖
之所以称为纯JS实现的右下角弹窗，是因为在任何页面中，只需先引入jQuery，再引入该JS文件即可使用。需要注意的是，jQuery的引入必须在该JS文件之前，因为该JS完全基于jQuery编写，缺少jQuery支持将无法运行。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>消息提醒</title>
<script src="jquery-1.8.3.js" type="text/javascript"></script>
<script src="notice_pop.js" type="text/javascript"></script>
</head>
<body>
</body>
</html>核心代码实现
该弹窗的核心JS代码notice_pop.js如下：
function pop_init(title,content) {
//取当前浏览器窗口大小
var windowWidth=$(document).width();
var windowHeight=$(document).height();
//弹窗的大小
var weight=320;
var height=240;
$("body").append(
"<div id='pop_div'style='display:none;position:absolute;border:1px solid #e0e0e0;z-index:99;width:"+weight+"px;height:"+height+"px;top:"+(windowHeight-height-10)+"px;left:"+(windowWidth-weight-10)+"px'>"+
"<div style='line-height:32px;background:#f6f0f3;border-bottom:1px solid #e0e0e0;font-size:14px;padding:0 0 0 10px;'>" +
"<div style='float:left;'><b>"+title+"</b></div><div style='float:right;cursor:pointer;'><b onclick='pop_close()'>×</b></div>" +
"<div style='clear:both'></div>"+
"</div>" +
"<div id='content'>" +
content+
"</div>"+
"</div>"
);
}
function pop_close(){
$('#pop_div').fadeOut(400);
}
$(document).ready(function(){
pop_init("公告信息","<ul><li>sss</li><li>sss</li></ul>");
$('#pop_div').fadeIn(400);
});HTML结构与CSS布局
虽然使用了jQuery，但核心在于HTML结构。关键是将div的position设置为absolute，添加1px灰色边框，并将z-index设为最高值，然后将其定位在浏览器可视区域右下角（即浏览器高度/宽度减去弹窗自身大小的位置）。
在弹窗内部的标题子面板中，放置两个float属性为left和right的div，分别用于显示标题和关闭按钮，实现左右分布效果。最后使用clear:both清除浮动，为下方内容留出空间。
以上即为纯JS右下角弹窗的完整实现示例，供读者参考。