本文实例为大家分享了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>
运行的效果:
点击打开:
点击关闭就可以关闭了。
上面的两部分代码可以和写在一起构成弹出登录框以及周围阴影的效果。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持尊托云数。
LABVIEW如何连接SQL Server详细说明 一、整体流程图 二、Sql Sever 2012下载安装...
1.判断是否有注入 ;and1=1 ;and1=2 2.初步判断是否是mssql ;anduser0 3.注入参数...
分享背景 由于一直在虚拟机的状态下开发PHP,尝试一下mac本地搭建环境.mac本身是...
最近出的每日一题里面,有一道是关于合并同类型数据为一行的题,使用SQL Server ...
大家应该都知道,在静态页面提交表单到数据库很简单就是单纯的 form action="tes...
本文转载自微信公众号「Java极客技术」,作者鸭血粉丝 。转载本文请联系Java极客...
导读: 正则表达式是处理字符串类型的"核武器",不仅速度快,而且功能强大。本文...
jsp 开发之struts2中s:select标签的使用 1.第一个例子: s:select list="{'aa','...
前言 上次咱们简单的学习了一下select的用法,一篇文章教会你进行Mysql数据库和...
支持多行同时拖拽,重复数据不重得添加,添加了图表右键菜单. 复制代码 代码如下...