JSP实现弹出登陆框以及阴影效果
更新时间：2021年03月16日 07:28:14 作者：布衣空空
这篇文章主要为大家详细介绍了JSP实现弹出登陆框以及阴影效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了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技术(下)...2006-10-10
在JSP下如何计算时间差...2007-02-02
JSP的9种基本内置组件...2006-10-10
Java中使用JCOM操作Office对象...2006-10-10
这篇文章主要为大家详细介绍了Jsp+Servlet实现文件上传下载功能的第三部分删除上传文件，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-01-01
这篇文章主要为大家详细介绍了JSP实现带查询条件的通用分页组件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-05-05
我认为JSP有问题(下)...2006-10-10
这篇文章主要介绍了Spring MVC中上传文件实例,本文给出配置、HTML、后端等的处理代码,需要的朋友可以参考下2015-05-05
IIS6 和Tomcat5 的整合...2006-10-10
struts2中一个表单中提交多个请求的例子（多个提交按钮）
在很多Web应用中，为了完成不同的工作，一个HTML form标签中可能有两个或多个submit按钮，Struts2中提供了另外一种方法，使得无需要配置可以在同一个action类中执行不同的方法（默认执行的是execute方法）2014-04-04
最新评论