本文實(shí)例為大家分享了JSP實(shí)現(xiàn)彈出登陸框以及陰影效果的具體代碼，供大家參考，具體內(nèi)容如下

先說(shuō)下思想JSP彈出登陸框的思想，我們?cè)贘SP中新建一個(gè)div層，然后Display設(shè)置成none，這樣打開(kāi)后是不可見(jiàn)的，然后我們通過(guò)一個(gè)點(diǎn)擊事件，比如當(dāng)我們點(diǎn)擊登陸按鈕時(shí)，就給它注冊(cè)一個(gè)點(diǎn)擊事件，使得div層變得可見(jiàn)，這樣就實(shí)現(xiàn)了彈出效果。

代碼如下：

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">  <form action="javascript:jump();" method="post">  <span> 歡迎登陸網(wǎng)上書(shū)店 </span> <br />  <label> 用戶名: </label> <input type="text" id="user" /> <br />  <label> 密碼: </label> <input type="password" id="psw" /> <br />  <input type="reset" value="重輸" />  <input type="button" value="退出" onclick="closeLogin();" />  <input type="submit" value="確定" />  </form> </div> <a href="javascript:openLogin();" >打開(kāi)</a> <a href="javascript:closeLogin();" >關(guān)閉</a>

運(yùn)行的效果：

點(diǎn)擊打開(kāi)按鈕：

點(diǎn)擊關(guān)閉就消失了。

再說(shuō)下在點(diǎn)擊之后造成的陰影效果，即除了登錄框外的都會(huì)變暗，并且不可操作。核心思想就是我們?cè)谠O(shè)置一個(gè)div層，并且將其初始設(shè)置為隱藏，當(dāng)點(diǎn)擊比如登陸時(shí)，和登陸框一起彈出，并且設(shè)置這個(gè)div的寬度和高度分別為屏幕的高度和寬度，顏色上也是選擇暗一點(diǎn)的帶有透明度的顏色（這個(gè)是在上面登錄框的基礎(chǔ)上進(jìn)行操作的）

代碼如下：

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"></div>

運(yùn)行的效果：

點(diǎn)擊打開(kāi)：

點(diǎn)擊關(guān)閉就可以關(guān)閉了。

上面的兩部分代碼可以和寫在一起構(gòu)成彈出登錄框以及周圍陰影的效果。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持。