JSP實現(xiàn)彈出登陸框以及陰影效果
更新時間：2021年03月16日 07:28:14 作者：布衣空空
這篇文章主要為大家詳細介紹了JSP實現(xiàn)彈出登陸框以及陰影效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了JSP實現(xiàn)彈出登陸框以及陰影效果的具體代碼，供大家參考，具體內(nèi)容如下
先說下思想JSP彈出登陸框的思想，我們在JSP中新建一個div層，然后Display設置成none，這樣打開后是不可見的，然后我們通過一個點擊事件，比如當我們點擊登陸按鈕時，就給它注冊一個點擊事件，使得div層變得可見，這樣就實現(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)上書店 </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>
運行的效果：
點擊打開：
點擊關閉就可以關閉了。
上面的兩部分代碼可以和寫在一起構成彈出登錄框以及周圍陰影的效果。
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了JSP中springmvc配置validator的注意事項的相關資料,并說明springmvc中spring-servlet.xml、applicationContext.xml的區(qū)別需要的朋友可以參考下2017-07-07
在jsp中發(fā)送email...2006-10-10
jsp頁面間傳中文參數(shù)示例(頁面?zhèn)鲄?shù)編碼)
在url地址欄使用中文傳參數(shù)可能會是亂碼了，下面我們來看看正確的jsp中頁面間傳中文參數(shù)轉(zhuǎn)碼的方法2014-01-01
一個用JSP做的日歷...2006-10-10
JSP開發(fā)入門(四)--JSP的內(nèi)部對象...2006-10-10
Java Web項目中連接Access數(shù)據(jù)庫的配置方法
本文是對前幾天的“JDBC連接Access數(shù)據(jù)庫的幾種方式”這篇的升級。由于在做一些小項目的時候遇到的問題，因此才決定寫這篇博客的。昨天已經(jīng)將博客發(fā)布了，但是后來經(jīng)過一些驗證有點問題，所以今天改了一下重新的發(fā)布了2013-05-05
echarts地圖展示功能很強大,官網(wǎng)上靜態(tài)展示的例子很多了,動態(tài)的資料少,需要參考本文的可以進來了解一下。2016-10-10
淺談jsp EL表達式取值過程、page和pagecontext的區(qū)別
下面小編就為大家?guī)硪黄獪\談jsp EL表達式取值過程、page和pagecontext的區(qū)別。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-03-03
這篇文章主要介紹了不讓tomcat顯示目錄文件列表的配置方法,這里需要修改conf/web.xml文件,需要的朋友可以參考下2014-03-03
下面小編就為大家?guī)硪黄猨sp輸出金字塔的簡單實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-06-06