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

本文介绍如何在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>

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

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


       

       

       


           

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值