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

程序员文章站 2022-05-06 09:43:20

...

先说下思想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>

运行的效果：
JSP之弹出登陆框以及阴影效果
点击打开按钮：

点击关闭就消失了

再说下在点击之后造成的阴影效果，即除了登录框外的都会变暗，并且不可操作。核心思想就是我们在设置一个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";
}