无为清净楼资源网 Design By www.qnjia.com
本文实例为大家分享了JSP实现弹出登陆框以及阴影效果的具体代码,供大家参考,具体内容如下
先说下思想JSP弹出登陆框的思想,我们在JSP中新建一个div层,然后Display设置成none,这样打开后是不可见的,然后我们通过一个点击事件,比如当我们点击登陆按钮时,就给它注册一个点击事件,使得div层变得可见,这样就实现了弹出效果。
代码如下:
CSS样式:
<style> .win { POSITION:absolute; left:55%; top:60%; width:400px; height:250px; margin-left:-300px;margin-top:-200px; border:1px solid #888; background-color: #d6cfcb; text-align: center; line-height: 60px; z-Index:3; } </style>
JS代码:
<script> function openLogin(){ document.getElementById("win").style.display=""; } function closeLogin(){ document.getElementById("win").style.display="none"; } </script>
html代码:
<div id="win" class="win" style="display:none"> <form action="javascript:jump();" method="post"> <span style="font-size: 20px;"> 欢迎登陆网上书店 </span> <br /> <label class="label"> 用户名: </label> <input type="text" class="input" id="user" /> <br /> <label class="label"> 密码: </label> <input type="password" class="input" id="psw" /> <br /> <input type="reset" value="重输" class="input1" /> <input type="button" value="退出" class="input3" onclick="closeLogin();" /> <input type="submit" value="确定" class="input2" /> </form> </div> <a href="javascript:openLogin();" >打开</a> <a href="javascript:closeLogin();" >关闭</a>
运行的效果:
点击打开按钮:
点击关闭就消失了。
再说下在点击之后造成的阴影效果,即除了登录框外的都会变暗,并且不可操作。核心思想就是我们在设置一个div层,并且将其初始设置为隐藏,当点击比如登陆时,和登陆框一起弹出,并且设置这个div的宽度和高度分别为屏幕的高度和宽度,颜色上也是选择暗一点的带有透明度的颜色(这个是在上面登录框的基础上进行操作的)
代码如下:
CSS样式:
<style> .hidebg { position:absolute; left:0px; top:0px; background-color:#000; width:100%; filter:alpha(opacity=60); opacity:0.6; display:none; z-Index:2; } </style>
JS代码:
function openLogin(){ document.getElementById("hidebg").style.display="block"; document.getElementById("hidebg").style.height=document.body.clientHeight+"px"; } function closeLogin(){ document.getElementById("hidebg").style.display="none"; }
html代码:
<div id="hidebg" class="hidebg"></div>
运行的效果:
点击打开:
点击关闭就可以关闭了。
上面的两部分代码可以和写在一起构成弹出登录框以及周围阴影的效果。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
无为清净楼资源网 Design By www.qnjia.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
无为清净楼资源网 Design By www.qnjia.com
暂无评论...
更新日志
2024年09月20日
2024年09月20日
- 《星舰铳犬太阳系物语》游戏背景介绍
- 《战锤40K星际战士2》终极版有后续DLC说明
- 《第9层》游戏特色玩法介绍
- 刀郎.2006-刀郎【九雨天下】【WAV+CUE】
- 59.9高校生.1994-素兰万岁【上华】【WAV+CUE】
- ECHO.1991-你是爱我还是需要我(国专)【EMI百代】【WAV+CUE】
- 交错战线零课主线困难通关阵容推荐一览
- 交错战线挖掘矿场角色推荐攻略
- 命运圣契公测平民阵容怎么搭配 新手开荒平民阵容攻略
- 金梅《现代发烧的声音2》发烧碟[WAV+CUE]
- 雨果唱片-《历史录音珍藏系列-现代芭蕾舞剧·红色娘子军》2CD【WAV】
- [雨果唱片]李冰《地方民歌·戏曲系列-爱的颂歌》WAV
- 《模拟人生》真人电影官宣!玛格特·罗比担任制片人
- 《星战绝地》系列玩家数超4000万!续作表现超预期
- EA称AI是其业务核心!能提高开发效率、节约成本