用jQuery实现这个功能其实非常简单，网上的例子太多太多了。不过，那些例子一般没有涉及到后台往前台传值的问题。在本文中这个问题会得到解决。
在实际应用中，提示框都是自动弹出的，因此，jQuery函数需写在jsp页面的<html>之外，即在<html>标签之外写一个<script>标签，这样，在加载jsp页面的内容之前会先执行这里面的方法。然后，弹出框其实就是一个div层，满足条件就显示这个层，在div中则可以显示由后台传过来的值，进行迭代输出。
var ids = "${certificate_info_id}";
//去掉"[]";
var newIds = ids.substr(1,ids.length-2);
//通过空格截取字符
var arrayIds = newIds.split(" ");
var len = arrayIds.length;
//再拼接字符
var str = "";
for(var i = 0;i<len;i++){
str+=arrayIds[i];
}
if(str!=""){
//openRemind(str);
$(document).ready(function(){
var mes = $("#kq_prompt");
mes.slideDown();
$("#iGetIt").click(function(){
mes.slideUp();
});
});
}我是先在后台找到符合条件的id，然后传到前台，在前台再进行一次判断。
div的代码：
<div id="kq_prompt">
<p id="closeP"><b>过期提醒</b></p>
(……中间输出内容略过……)
<p style="padding:5px 10px;text-align:center"><span id="iGetIt">我知道了</span></p>
</div>slideDown()是向上显示div，slideUp()向下隐藏div，click()就是点击触发效果。
最后贴上CSS代码：
#kq_prompt{
width:300px;
height:400px;
overflow:hidden;
display:none;
border:1px solid #bbb;
position:absolute;
bottom:0;
right:0;
background:#fff;
font-size:13px;
}
#closeP{
border-bottom:1px solid #bbb;
width:100%;
height:20px;
cursor:pointer;
line-height:20px;
text-align:center;
color:blue;
}
#iGetIt{
background:#4985B7;
cursor:pointer;
padding:5px 10px;
color:#fff;
font-weight:bold;
}最后上一张效果图：
另外这个效果，在IE浏览器下会有点抖动现象，可以在JSP页面上添加：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">在做这个之前，几乎没有用过jQuery，所以在实现之前觉得这个好神奇，但做完之后却又觉得比较简单。这应该就是做与不做之间的差别吧。
之前用window.open()实现了这个功能，但是比较丑，比现在的这个更丑。上面的标题栏死活去不了，所以就采用了jQuery来实现。
扫一扫
384
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
