您的位置：首页 > Web前端 > JQuery

jQuery实现在右下角弹出提示框

2013-10-22 15:16 232 查看

用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();
});

});
}

在执行这个弹出框之前，应该先有一个条件判断，我这里的需求是，当合同到期的天数为1的时候就自动弹出提示框。

我是先在后台找到符合条件的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>

中间输出的内容可以是struts2标签、jstl、EL表达示等，反正自己习惯怎么用就怎么写。

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;
}

由kq_prompt可以看到，div设置为绝对定位，距离右边为0，距离下边为0，这样就显示在右下角了。另外，display为none，就是隐藏的，然后使用了jQuery的slideDown()方法后又会自动显示出来。

最后上一张效果图：

另外这个效果，在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来实现。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航