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

网络编程 2024/12/24 佚名

2 0 1

天枫庄资源网 Design By www.wosibo.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>

运行的效果：

点击打开：

点击关闭就可以关闭了。

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

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

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

标签：

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

天枫庄资源网 Design By www.wosibo.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

天枫庄资源网 Design By www.wosibo.com

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

暂无JSP实现弹出登陆框以及阴影效果的评论...

www.wosibo.com 天枫庄资源网

139,976影音资源

144,792福利资源

21,817软件资源

631,128技术资源

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

昨天有一位朋友在大神群里分享，自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址，com.cn和后面的zh都非常明白地表明这就是国服战网。
而他在复制这个网址并且进行登录之后，确实是网易的网址，也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情，因为以前都没有出现这样的情况，现在突然提示跳转到国服战网的网址，是不是说明了简体中文客户端已经开始进行更新了呢？

更新日志

2024年12月24日

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

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

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

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

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

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

更新日志

友情链接