JSP實(shí)現(xiàn)彈出登陸框以及陰影效果

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

先說下思想jsp彈出登陸框的思想，我們在jsp中新建一個div層，然后display設(shè)置成none，這樣打開后是不可見的，然后我們通過一個點(diǎn)擊事件，比如當(dāng)我們點(diǎn)擊登陸按鈕時，就給它注冊一個點(diǎn)擊事件，使得div層變得可見，這樣就實(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" class="win" style="display:none">
  <form action="javascript:jump();" method="post">
  <span style="font-size: 20px;"> 歡迎登陸網(wǎng)上書店  <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();" >關(guān)閉</a>

運(yùn)行的效果：

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

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

再說下在點(diǎn)擊之后造成的陰影效果，即除了登錄框外的都會變暗，并且不可操作。核心思想就是我們在設(shè)置一個div層，并且將其初始設(shè)置為隱藏，當(dāng)點(diǎn)擊比如登陸時，和登陸框一起彈出，并且設(shè)置這個div的寬度和高度分別為屏幕的高度和寬度，顏色上也是選擇暗一點(diǎn)的帶有透明度的顏色（這個是在上面登錄框的基礎(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" class="hidebg"></div>

運(yùn)行的效果：

點(diǎn)擊打開：

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

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

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

相關(guān)文章
亚洲国产精品第一区二区，久久免费视频77，99V久久综合狠狠综合久久，国产免费久久九九免费视频