由于页面设计的需要，要自定义一个弹出框用来写帮助文档，所以自己就写了一个小控件，如下：
页面代码如下：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>测试小帮手</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<link rel="stylesheet" type="text/css" href="css/ui-lightness/jquery-ui-1.8.16.custom.css">
<script type="text/javascript" src="js/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="js/jquery.help.js"></script>
</head>
<script type="text/javascript">
$(document).ready(function(){
$("#alerm").help("123213213213213213");
})
</script>
<body>
<div id="alerm" style="background: url('images/btn_assistant.jpg');width: 100px;height: 28px;cursor: pointer;"></div>
</body>
</html>
CSS代码如下：
/*
* jQuery UI help 1.0.0
*
* Copyright 2012, AUTHORS.txt (http://jqueryui.com/about)
* Dual licensed under the MIT or GPL Version 2 licenses.
* http://jquery.org/license
*
* http://docs.jquery.com/UI/Progressbar#theming
*/
.ui-help-help_pop{width:490px;height:400px;border:solid 1px #b5b5b5;position:absolute;overflow:hidden;display: none;}
.ui-help-help_pop #help_title{ background:url(images/ui-bg_gloss-wave_35_f6a828_1x40.png) repeat-x;height:40px;line-height:40px;font-size: 100%;font-weight: normal;text-align: center;padding:0;margin:0;}
.ui-help-close_helpBtn{ float:right;margin:10px;background: url(images/ui-btn-ass-close.png) repeat-x;width: 23px;height: 23px;display: inline;}
.ui-help-help_content{ width:478px;height:350px;margin-left:5px;font:normal 14px "宋体";color:#040404;line-height:22px;overflow-y: auto;padding:0;overflow-x:hidden;}
.ui-help-help_content p{ margin-left:14px;}
.ui-help-help_content h3{ font-weight:bold;line-height:36px;}
.ui-help-help_content img{ margin:8px 0}
控件代码即jquery.help.js代码如下：
/*
* jquery.help.
*
* Copyright (c) 2012 by roger
*
* Launch : March 2012
* Version : 1.0.0
* Released: March 13th, 2012 - 15:00
* Debug: jquery.help.js
*/
(function(f) {
/**
*
* @example $("#example").help("string");
* @desc 可以直接传字符串进去
*
* @example $("#example").help({top:100,left:100,background:"#fff",color:"#000",fontSize:12,context:"string",opacity:50});
* @desc 通过不同的参数控制输入文本的样式，top和left控制层在浏览器中的位置，background控制文本显示区域的背景色，color控制字体的颜色，fontSize控制字体的大小，context是文本的内容,opacity是弹出框背景透明度
*
* @example $("#example").help({url:"http://www.baidu.com"});
* @desc 也可以传一个URL，该页面将显示链接的页面
*
* * @example $("#example").help(style:"S2X");
* @desc 窗口显示特效，目前仅支持Z2Y左右滑出，S2X上下滑出，和XZH斜向逐步显示
*/
f.fn.help = function(options){
var context = "";
opts = jQuery.extend({
top : 10,
left : function(){
var reLeft = 0;
if($(document.body).width()>490){
reLeft = $(document.body).width()/2 - 245;
}
return reLeft;
},
background:"#fff",
color:"#000",
fontSize:12,
url:"",
opacity:10
},options || {});
if(typeof options=="object"){
context = opts.context;
}else if(typeof options=="string"){
context = options;
}
if(opts.url != ""){
context = "<iframe align='top' frameborder='0' width='100%' style='overflow-x:hidden;overflow-y:auto;' height='100%' src='"+opts.url+"'>无法加载iframe</iframe>";
}
var divElement = new Array();
divElement.push("<div id='floatBoxBg' style='display:none;width:100%;height:100%;background-color:#000;filter:alpha(opacity="+opts.opacity+");opacity:"+(opts.opacity/100)+";position:absolute;top:0;left:0;'></div>");
divElement.push("<div id='help_pop'>");
divElement.push("<h2><a href='javascript:void(0)' id='close_helpBtn'></a>小帮手</h2>");
divElement.push("<div id='help_content'>"+context+"</div>");
divElement.push("</div>");
$(document.body).append(divElement.join(""));
$("#help_pop").addClass("ui-help-help_pop");
$("#close_helpBtn").addClass("ui-help-close_helpBtn").click(function(){
$("#help_pop").animate(f.fn.help.style[opts.style ||"XZH"],function(){$("#floatBoxBg").hide();});
});
$("#help_content").addClass("ui-help-help_content");
$(this).click(function(){
$("#help_pop").animate(f.fn.help.style[opts.style ||"XZH"],"normal").css({top:opts.top,left:opts.left,background:opts.background});
$("#help_content").css({'color':opts.color,'font-size':opts.fontSize+'px'});
$("#floatBoxBg").show();
})
}
/*窗口显示特效，目前仅支持Z2Y左右滑出，S2X上下滑出，和XZH斜向逐步显示*/
f.fn.help.style={
S2X:{height: 'toggle'},
Z2Y:{width:'toggle'},
XZH:{ height: 'toggle',width:'toggle'}
}
})(jQuery);