class="dialog"
id="edituserdiv"
style="display: none">
編輯管理員h3>
class="cancelbtn">xspan>
class="clearfix">
div>
action="/manager/edituser"
method="post"
id="edituserform">
for="editusername">使用者名稱label>
type="text"
style="width: 220px;"
name="editusername"
id="editusername"
readonly>
p>
for="editpassword">密碼label>
type="password"
style="width: 220px;"
name="editpassword"
id="editpassword">
p>
for="editpasswordagain">重複密碼label>
type="password"
style="width: 220px;"
name="editpasswordagain"
id="editpasswordagain">
p>
for="editpermissionlevel">等級label>
name="editpermissionlevel"
id="editpermissionlevel"
disabled>
value="l1">l1option>
value="l2">l2option>
value="l3">l3option>
select>
p>
for="permissionlist">許可權label>
id="permissionlist">
type="checkbox"
name="playermanage"
id="playermanage"
value="t"
class="checkboxval">
for="playermanage">玩家管理label>
span>
type="checkbox"
name="gamemanage"
id="gamemanage"
value="t"
class="checkboxval">
for="gamemanage">遊戲管理label>
span>
type="checkbox"
name="playerlog"
id="playerlog"
value="t"
class="checkboxval">
for="playerlog">玩家日誌label>
span>
type="checkbox"
name="servermanage"
id="servermanage"
value="t"
class="checkboxval">
for="servermanage">伺服器管理label>
span>
type="checkbox"
name="usermanage"
id="usermanage"
value="t"
class="checkboxval">
for="usermanage">管理員管理label>
span>
div>
p>
驗證p>
for="password2">密碼label>
type="password"
style="width: 220px;"
name="password"
id="password2">
p>
type="submit"
id="submitedituserbtn">更新button>
form>
div>
id="fullbg"
style="display: none">
div>
/*編輯 管理員 視窗*/
#edituserdiv > h3
#edituserdiv > span
.clearfix
:after
#edituserform > p
#edituserform > p > input
#edituserform > p > select
#edituserform > button
#permissionlist
#permissionlist > span
/*灰色遮罩層*/
#fullbg
/*彈出視窗*/
.dialog
$(document).ready(
// 彈出 編輯管理員 視窗
$("#edituserbtn").click(function () else );
}if ($selectedgamemanage === 't') );
}if ($selectedplayerlog === 't') );
}if ($selectedservermanage === 't') );
}if ($selectedusermanage === 't') );
}showbg();
$("#edituserdiv").show();}})
);// 關閉 彈窗
$(document).ready(
$('.cancelbtn').click(function () )
);// 顯示 灰色遮罩層
function showbg() );
$('#fullbg').show();
}// 關閉 灰色遮罩層
function closebg()
模態框的的實現
模態框的製作 思路 兩個div進行絕對定位。背景黑色透明度opacity 設0.8 對前端顯示內容的框進行設定，加入模態框需要顯示的樣式即可。引入jquery 關於html的布局 class btn class mtqian class close alt div class motai div 關...
Flex實現網頁模態框
flex布局 align items 用於彈性盒子，用來設定所有子元素在側軸上的布局 align self 用於彈性盒子的子元素，設定子元素在側軸的布局 線性漸變基礎 linear gradient colora,colorb 主要是用來是實現模態框上面元素進行上下左右的居中顯示 rule btn ...
原生js實現模態框拖動
由於本人水平有限，不足之處請大佬指出！1.引入reset.css 2.編寫html檔案 控制內容的高度 確認修改 注意 內容的高度相對於頭部和頂部的份數 顯示模態框 x3.編寫index.css檔案 body drag drag drag header drag drag body drag dra...