JSP实现弹出登陆框以及阴影效果

站长资源 2024/11/24 佚名

18 1538 18

DDR爱好者之家 Design By 杰米

本文实例为大家分享了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>

运行的效果：

点击打开：

点击关闭就可以关闭了。

上面的两部分代码可以和写在一起构成弹出登录框以及周围阴影的效果。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

jsp弹出登陆框,jsp阴影效果,jsp弹出框

DDR爱好者之家 Design By 杰米

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

DDR爱好者之家 Design By 杰米

评论“JSP实现弹出登陆框以及阴影效果”

暂无评论...

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒经典版》的玩家都可以获得奖励。

更新日志

2024年11月24日

JSP实现弹出登陆框以及阴影效果

JSP+Servlet实现文件上传到服务器功能

JSP实现页面右下角消息弹框

评论“JSP实现弹出登陆框以及阴影效果”

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

更新日志

友情链接