web 页面实现页面右下角弹窗功能

最新推荐文章于 2025-07-08 14:55:34 发布

原创最新推荐文章于 2025-07-08 14:55:34 发布 · 7.7k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#jsp #J2EE #前端 #右下角弹窗 #标签的创建使用

J2EE相关问题专栏收录该内容

7 篇文章

订阅专栏

本文介绍如何在J2EE项目中通过JSP实现页面右下角弹窗提醒功能。当用户未设置密码找回问题时，弹窗会提示用户并提供直接跳转的链接。实现过程中，首先在web.xml文件中配置自定义标签。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近客户有需求，需要提醒没有增加密码找回问题的用户，页面可以在右下角弹窗提醒，并可以点击直接跳转：

这个功能最好的解决方法，就是在页面上加个标签，可以来判断数据是否为空：

做一个标签首先得在项目的web.xml里配置自己的标签：

如下：

<taglib>
<taglib-uri>http://www.wiscom.com.cn/portal/user</taglib-uri>
<taglib-location>/WEB-INF/tags/user.tld</taglib-location>
</taglib>

然后在页面调用你自己写的标签：

<%@ taglib prefix="user" uri="http://www.wiscom.com.cn/portal/user" %> //其中定义的  <span style="font-family: Arial, Helvetica, sans-serif;">http://www.wiscom.com.cn/portal/user 是随便写的  自定义 但要跟自己写的tld文件中的对应 </span>

我自己写的user.tld文件如下：

<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE taglib PUBLIC "-//Sun Microsystems, Inc.//DTD JSP Tag Library 1.2//EN"
        "http://java.sun.com/dtd/web-jsptaglibrary_1_2.dtd">

<taglib>
    <tlib-version>1.0</tlib-version>
    <jsp-version>1.2</jsp-version>
    <short-name>user</short-name>
    <uri>http://www.wiscom.com.cn/portal/user</uri>//此处应该跟其他地方的配置一下  且此处决定配置
    <description>Wiscom Portal Render JSP Tag Library.</description>

    <tag>
        <name>hasQuestion</name>
        <tag-class>com.wiscom.portal.tags.UserAttritubeTag</tag-class> //这边决定了标签执行时，要执行的后台代码
        <body-content>JSP</body-content>
    </tag>

</taglib>

之后就是前台调用了，代码如下：

	<user:hasQuestion>

<script type="text/javascript" >
	  //记得加载jquery
	  //作者：gk
	  //使用参数：1.标题，2.链接地址，3.内容简介
	  window.onload=function(){
			var pop=new Pop("您找回密码问题尚未填写",
			"/userAttributesEdit.portal",
			"通过找回密码问题可以快速找回密码");
			
		}
</script>
  
<div id="pop" style="display:none;">
	<style type="text/css">
	*{margin:0;padding:0;}
	#pop{background:#fff;width:260px;border:1px solid #e0e0e0;font-size:12px;position: fixed;right:10px;bottom:10px;}
	#popHead{line-height:32px;background:#f6f0f3;border-bottom:1px solid #e0e0e0;position:relative;font-size:12px;padding:0 0 0 10px;}
	#popHead h2{font-size:14px;color:#666;line-height:32px;height:32px;}
	#popHead #popClose{position:absolute;right:10px;top:1px;}
	#popHead a#popClose:hover{color:#f00;cursor:pointer;}
	#popContent{padding:5px 10px;}
	#popTitle a{line-height:24px;font-size:14px;font-family:'微软雅黑';color:#333;font-weight:bold;text-decoration:none;}
	#popTitle a:hover{color:#f60;}
	#popIntro{text-indent:24px;line-height:160%;margin:5px 0;color:#666;}
	#popMore{text-align:right;border-top:1px dotted #ccc;line-height:24px;margin:8px 0 0 0;}
	#popMore a{color:#f60;}
	#popMore a:hover{color:#f00;}
	</style>
	<div id="popHead">
	<a id="popClose" title="关闭">关闭</a>
	<h2>温馨提示</h2>
	</div>
	<div id="popContent">
	<dl>
		<dt id="popTitle"><a href="http://www.baidu.com" target="_blank">这里是参数</a></dt>
		<dd id="popIntro">这里是内容简介</dd>
	</dl>
	<p id="popMore"><a href="http://yanue.info/" target="_blank">查看 »</a></p>
	</div>
</div></user:hasQuestion>

         这样一个标签功能就可以实现了！！！！

         附件提供右下角弹窗功能的实现完整代码。