JSP实现弹出登陆框以及阴影效果（jsp弹出层）奔走相告

🌐 经济型：买域名、轻量云服务器、用途：游戏网站等《腾讯云》特点：特价机便宜适合初学者用点我优惠购买

🚀 拓展型：买域名、轻量云服务器、用途：游戏网站等《阿里云》特点：中档服务器便宜域名备案事多点我优惠购买

🛡️ 稳定型：买域名、轻量云服务器、用途：游戏网站等《西部数码》特点：比上两家略贵但是稳定性超好事也少点我优惠购买

文章摘要

本文介绍了如何使用JSP和JavaScript实现一个弹出式登录框功能，并添加了阴影效果。主要分为两部分： 1. **弹出式登录框实现**： - 使用JSP创建一个div层，设置其显示为none，不可见。 - 通过点击事件（如点击“登录”按钮）使其可见。 - 使用CSS样式设置div的宽度、高度、背景颜色等，使其形状为矩形。 - 提供用户输入用户名、密码和操作功能（如重输或退出）。 2. **阴影效果实现**： - 在div层外添加一个背景色div（id为hidebg），设置其位置为绝对，覆盖整个页面。 - 使用CSS样式设置该div的透明度和 opacity，使其呈现半透明效果。 - 点击时，显示该div并设置其高度为页面高度；点击后，隐藏该div。代码部分提供了详细的JS和CSS代码，用于实现上述功能。整体效果为点击登录按钮后，弹出一个带有阴影背景的登录框，点击关闭按钮后，登录框消失。这篇文章为需要实现弹出式登录框功能的开发者提供了参考代码和实现思路。

本文实例为大家分享了JSP实现弹出登陆框以及阴影效果的具体代码，供大家参考，具体内容如下

先说下思想JSP弹出登陆框的思想，我们在JSP中新建一个div层，然后Display设置成none，这样打开后是不可见的，然后我们通过一个点击事件，比如当我们点击登陆按钮时，就给它注册一个点击事件，使得div层变得可见，这样就实现了弹出效果。

代码如下：

CSS样式：

JS代码：

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=”https://www.jb51.net/article/javascript:openLogin();” >打开</a>
<a href=”https://www.jb51.net/article/javascript:closeLogin();” >关闭</a>

运行的效果：

点击打开按钮：

点击关闭就消失了。

再说下在点击之后造成的阴影效果，即除了登录框外的都会变暗，并且不可操作。核心思想就是我们在设置一个div层，并且将其初始设置为隐藏，当点击比如登陆时，和登陆框一起弹出，并且设置这个div的宽度和高度分别为屏幕的高度和宽度，颜色上也是选择暗一点的带有透明度的颜色（这个是在上面登录框的基础上进行操作的）

代码如下：

CSS样式：

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代码：

运行的效果：

点击打开：

点击关闭就可以关闭了。

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

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

您可能感兴趣的文章:JavaScript实现弹出式可拖动登录框js实现点击弹窗弹出登录框js实现登录弹框