JSP實現彈出登陸框以及陰影效果

2022-10-06 03:06:07 字數 681 閱讀 3922

先說下思想jsp彈出登陸框的思想,我們在jsp中新建乙個div層,程式設計客棧然後display設定成none,這樣開啟後是不可見的,然後我們通過乙個點選事件,比如當我們點選登陸按鈕時,就給它註冊乙個點選事件,使得div層變得可見,這樣就實現了彈出效果。

**如下:

css樣式:

js**:

html**:

j**ascript:openlogin();" >開啟

關閉執行的效果: 

點選開啟按鈕:

點選關閉就消失了。

再說下在點選之後造成的陰影效果,即除了登入框外的都會變暗,並且不可操作。核心思想就是我程式設計客棧們在設定乙個div層,並且將其初始設定為隱藏,當點選比如登陸時,和登陸框一起彈出,並且設定這個div的寬度和高度分別為螢幕的高度和寬度,顏色上也是選擇暗一點的帶有透明度的顏色(這個是在上面登入框的基礎上進行操作的)

**如下:

css樣式:

js**:

function openlogin()

function closelogin()

html**:

執行的效果: 

點選開啟:

點選關閉就可以關閉了。

上面的兩部分**可以和寫在一起構成彈出登入框以及周圍陰影的效果。

本文標題: jsp實現彈出登陸框以及陰影效果

本文位址:

怎樣讓登陸框蓋在網頁主體,點選按鈕彈出登陸框

這裡我用 來表示 html部分 x登 錄 css部分 遮罩層 mask 遮罩層 登入表單 login form login form login bd login form close login form h3 login form input login form login btn 登入表單 ...

JSP彈出對話方塊兩種實現方式

jsp彈出對話方塊兩種實現方式 1 一種是彈出乙個新的窗體出來,window.open test.html 用於控制彈出新的視窗test.html,如果test.html不與主視窗在同一路徑下,前面應寫明路徑,絕對路徑 http 和相對路徑 均可。用單引號和雙引號都可以,只是不要混用。這一段 可以加...

C winform登陸框驗證碼的實現方法

1 新建乙個簡單的 windows 應用專案 在預設的 form1 中新增如下控制項 1 label text 輸入驗證碼 2 textbox name txtvalidcode 輸入驗證碼的文字框 3 image name picvalidcode 顯示驗證碼的控制項 4 www.cppcns.c...