java页面弹出框登录已经背景变灰色
在日常操作或是项目的实际应用中,有不少朋友对于“java页面弹出框登录已经背景变灰色”的问题会存在疑惑,下面小编给大家整理和分享了相关知识和资料,易于大家学习和理解,有需要的朋友可以借鉴参考,下面我们一起来了解一下吧。 先说下思想JSP弹出登陆框的思想,我们在JSP中新建一个div层,然后Display设置成none,这样打开后是不可见的,然后我们通过一个点击事件,比如当我们点击登陆按钮时,就给它注册一个点击事件,使得div层变得可见,这样就实现了弹出效果。 代码如下: CSS样式:
.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; }
JS代码:
function openLogin(){ document.getElementById("win").style.display=""; } function closeLogin(){ document.getElementById("win").style.display="none"; }
html代码:
运行的效果: 点击打开按钮: 点击关闭就消失了。 再说下在点击之后造成的阴影效果,即除了登录框外的都会变暗,并且不可操作。核心思想就是我们在设置一个div层,并且将其初始设置为隐藏,当点击比如登陆时,和登陆框一起弹出,并且设置这个div的宽度和高度分别为屏幕的高度和宽度,颜色上也是选择暗一点的带有透明度的颜色(这个是在上面登录框的基础上进行操作的) 代码如下: CSS样式:
.hidebg { position:absolute; left:0px; top:0px; background-color:#000; width:100%; filter:alpha(opacity=60); opacity:0.6; display:none; z-Index:2; }
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代码:
运行的效果: 点击打开: 点击关闭就可以关闭了。 上面的两部分代码可以和写在一起构成弹出登录框以及周围阴影的效果。 以上就是关于“java页面弹出框登录已经背景变灰色”的介绍了,感谢各位的阅读,希望这篇文章能帮助大家解决问题。 (编辑:汽车网) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |