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

这个例子分享了JSP实现弹出落地框和阴影效果的具体代码，供大家参考。具体内容如下

先说说JSP弹出登陆框的想法。我们在JSP中创建新的div层，然后将Display设置为none，这样打开后就不可见了。然后我们通过一个click事件为它注册一个click事件，比如我们点击登录按钮的时候，这样div图层就变得可见了，从而实现了弹出的效果。

代码如下：

CSS样式：

风格。win { POSITION:absolute绝对值；左侧：55%；top :60%；宽度width:400px高度：250 px；边距-left :-300 px；边距-top :-200 px；border:1px固体# 888；背景-color : # d6cfcb；文本对齐：中心；线高： 60px；z-index :3；}/styleJS代码：

脚本函数openlog in(){ document . getelementbyid(' win '). style . display=' '；}函数closelog in(){ document . getelementbyid(' win '). style . display=' none '；}/scripthtml代码：

div id=' win ' class=' win ' style=' display : none ' form action=' JavaScript : jump()；'方法=' post ' span style=' font-size : 20px；'欢迎来到网上书店/span br/Label class=' Label ' username 3360/Label input type=' text ' class=' input ' id=' user '/br/Label class=' Label ' password 3360/Label input type=' input ' id=' PSW '/br/input type=' reset '值=' re input ' class=' input 1 '/input type=' button '值=' exit ' class=' input 3 ' onclick=' close log in()；'/input type=' submit ' value=' ok ' class=' input 2 '/form/div a href=' JavaScript : open log in()；'open/a a href=' JavaScript : close log in()；'关闭/a操作的影响：

单击打开按钮：

单击关闭并消失。

先说一下点击后的阴影效果，就是除了登录框以外的一切都会变暗，无法操作。核心思想是我们正在设置一个div层，并且最初将其设置为隐藏。比如点击登录时，会和登录框一起弹出，这个div的宽度和高度分别设置为屏幕的高度和宽度。颜色也是带有透明度的深色(这是基于上面的登录框操作的)

代码如下：

CSS样式：

style . hide BG { position : absolute；left:0pxtop:0px背景色： # 000；宽度：100%；filter:alpha(不透明度=60)；opacity:0.6display:nonez-index :2；}/styleJS代码：

函数openlog in(){ document . getelementbyid(' hide BG '). style . display=' block '；document . getelementbyid(' hidebg '). style . height=document . body . client height ' px '；}函数closelog in(){ document . getelementbyid(' hide BG '). style . display=' none '；}html代码：

div id=' hide beg ' class=' hide beg '/div运行的效果：

单击打开：

单击关闭将其关闭。

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

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