本文實例為大家分享了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>
運行的效果：
點擊打開：
點擊關閉就可以關閉了。
上面的兩部分代碼可以和寫在一起構成彈出登錄框以及周圍陰影的效果。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:- WebGL three.js學習筆記之陰影與實現物體的動畫效果
- 利用Three.js如何實現陰影效果實例代碼
- js當前頁面登錄注冊框,固定div,底層陰影的實例代碼
- JS當前頁面登錄注冊框,固定DIV,底層陰影的實例代碼
- js 實現無干擾陰影效果 簡單好用（附文件下載）
- Div+Js實現的帶陰影菜單 微軟以前網站曾用過
- 用JS實現網頁元素陰影效果的研究總結
- JavaScript canvas實現帶有陰影的圖形和文字
