请选择 进入手机版 | 继续访问电脑版

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

[复制链接]
查看928 | 回复0 | 2020-7-16 07:45:56 | 显示全部楼层 |阅读模式
本文实例为大家分享了JSP实现弹出登陆框以及阴影效果的具体代码,供大家参考,具体内容如下
先说下思想JSP弹出登陆框的思想,我们在JSP中新建一个div层,然后Display设置成none,这样打开后是不可见的,然后我们通过一个点击事件,比如当我们点击登陆按钮时,就给它注册一个点击事件,使得div层变得可见,这样就实现了弹出效果。

代码如下:

CSS样式:
  1. <style>
  2.   .win {
  3.    POSITION:absolute; left:55%; top:60%;
  4.    width:400px; height:250px;
  5.    margin-left:-300px;margin-top:-200px; border:1px solid #888;
  6.    background-color: #d6cfcb; text-align: center;
  7.    line-height: 60px; z-Index:3;
  8.   }
  9. </style>
复制代码
JS代码:
  1. <script>
  2.   function openLogin(){
  3.    document.getElementById("win").style.display="";
  4.   }
  5.   function closeLogin(){
  6.    document.getElementById("win").style.display="none";
  7.   }
  8. </script>
复制代码
html代码:
  1. <div id="win" class="win" style="display:none">
  2.    <form action="javascript:jump();" method="post">
  3.     <span style="font-size: 20px;"> 欢迎登陆网上书店 </span> <br />
  4.     <label class="label"> 用户名: </label> <input type="text" class="input" id="user" /> <br />
  5.     <label class="label"> 密码: </label> <input type="password" class="input" id="psw" /> <br />
  6.     <input type="reset" value="重输" class="input1" />
  7.     <input type="button" value="退出" class="input3"  />
  8.     <input type="submit" value="确定" class="input2" />
  9.    </form>
  10.   </div>
  11. <a href="javascript:openLogin();" >打开</a>
  12. <a href="javascript:closeLogin();" >关闭</a>
复制代码
运行的效果:

JSP实现弹出登陆框以及阴影效果-1.jpg


点击打开按钮:
JSP实现弹出登陆框以及阴影效果-2.jpg

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

代码如下:

CSS样式:
  1. <style>
  2. .hidebg {
  3.    position:absolute; left:0px; top:0px;
  4.    background-color:#000;
  5.    width:100%;
  6.    filter:alpha(opacity=60);
  7.    opacity:0.6;
  8.    display:none;
  9.    z-Index:2;
  10.   }
  11. </style>
复制代码
JS代码:
  1. function openLogin(){
  2. document.getElementById("hidebg").style.display="block";
  3. document.getElementById("hidebg").style.height=document.body.clientHeight+"px";
  4. }
  5. function closeLogin(){
  6. document.getElementById("hidebg").style.display="none";
  7. }
复制代码
html代码:
  1. <div id="hidebg" class="hidebg"></div>
复制代码
运行的效果:

JSP实现弹出登陆框以及阴影效果-3.jpg


点击打开:
JSP实现弹出登陆框以及阴影效果-4.jpg

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

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


买目录提供泛目录、二级目录、租目录、出租网站建设资源、编程学习类,提供asp、php、asp.net、javascript、jquery、vbscript、dos批处理、网页制作、网络编程、网站建设等编程资料。
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则