模态框功能实现

html：

<!--编辑 管理员 窗口--><div class="dialog" id="editUserDiv" style="display: none">    <h3>编辑管理员</h3>    <span class="cancelBtn">X</span>    <div class="clearfix"></div>    <hr />    <form action="/manager/editUser" method="post" id="editUserForm">        <p>            <label for="editUsername">用户名</label>            <input type="text" style="width: 220px;" name="editUsername" id="editUsername" readonly>        </p>        <p>            <label for="editPassword">密码</label>            <input type="password" style="width: 220px;" name="editPassword" id="editPassword">        </p>        <p>            <label for="editPasswordAgain">重复密码</label>            <input type="password" style="width: 220px;" name="editPasswordAgain" id="editPasswordAgain">        </p>        <p>            <label for="editPermissionLevel">等级</label>            <select name="editPermissionLevel" id="editPermissionLevel" disabled>                <option value="L1">L1</option>                <option value="L2">L2</option>                <option value="L3">L3</option>            </select>        </p>        <p>            <label for="permissionList">权限</label>            <div id="permissionList">                <span>                    <input type="checkbox" name="playerManage" id="playerManage" value="T" class="checkboxVal">                    <label for="playerManage">玩家管理</label>                </span>                <span>                    <input type="checkbox" name="gameManage" id="gameManage" value="T" class="checkboxVal">                    <label for="gameManage">游戏管理</label>                </span>                <span>                    <input type="checkbox" name="playerLog" id="playerLog" value="T" class="checkboxVal">                    <label for="playerLog">玩家日志</label>                </span>                <span>                    <input type="checkbox" name="serverManage" id="serverManage" value="T" class="checkboxVal">                    <label for="serverManage">服务器管理</label>                </span>                <span>                    <input type="checkbox" name="userManage" id="userManage" value="T" class="checkboxVal">                    <label for="userManage">管理员管理</label>                </span>            </div>        </p>        <p>验证</p>        <hr />        <p>            <label for="password2">密码</label>            <input type="password" style="width: 220px;" name="password" id="password2">        </p>        <button type="submit" id="submitEditUserBtn">更新</button>    </form></div><!--遮罩层--><div id="fullBg" style="display: none"></div>

---

css：

/*编辑 管理员 窗口*/#editUserDiv > h3 {    float: left;    margin-top: 15px;    margin-left: 5px;}#editUserDiv > span {    float: right;    margin-top: 15px;    margin-right: 10px;    cursor: pointer;}.clearfix:after {  content: ".";  display: block;  height: 0;  clear: both;  visibility: hidden;}#editUserForm > p {    margin: 10px;}#editUserForm > p > input {    position: absolute;    left: 80px;}#editUserForm > p > select {    position: absolute;    left: 80px;}#editUserForm > button {    cursor: pointer;    margin: 10px 40%;}#permissionList {    border: 1px solid gray;    height: 183px;    width: 60%;    overflow-y: scroll;    margin-left: 80px;    margin-top: -20px;}#permissionList > span {    display: block;    border-bottom: 1px dashed gray;    padding: 5px;}/*灰色遮罩层*/#fullBg {    background-color: gray;    opacity: .5;    position: absolute;    left: 0;    top: 0;    z-index: 4;    -moz-opacity: 0.5;    -khtml-opacity: 0.5;}/*弹出窗口*/.dialog {    background-color: #2f3032;    border: 5px solid gray;    height: 55%;    width: 20%;    position: absolute;    left: 50%;    top: 25%;    z-index: 5;    overflow: auto;}

---

前端js：

$(document).ready(// 弹出 编辑管理员 窗口    $("#editUserBtn").click(function () {        var editUserID = $('#selectedUserID:checked').val();  // 获取 选择的 “编号”        if ( !editUserID ) {            alert('请先选择一名用户！');            return false;        } else {        // 通过 编号，选择 第几个tr，最后在选择 其子元素 第几个td元素            var $selectedUsername = $('tr').eq(editUserID).find('td').eq(2).text();            var $selectedPermissionLevel = $('tr').eq(editUserID).find('td').eq(3).text();            var $selectedPlayerManage = $('tr').eq(editUserID).find('td').eq(4).text();            var $selectedGameManage = $('tr').eq(editUserID).find('td').eq(5).text();            var $selectedPlayerLog = $('tr').eq(editUserID).find('td').eq(6).text();            var $selectedServerManage = $('tr').eq(editUserID).find('td').eq(7).text();            var $selectedUserManage = $('tr').eq(editUserID).find('td').eq(8).text();        // 设置 默认值            $('#editUsername').val($selectedUsername);            $('#editPermissionLevel').val($selectedPermissionLevel);            if ($selectedPlayerManage === 'T') {                $('#playerManage').attr({                    checked: true                });            }            if ($selectedGameManage === 'T') {                $('#gameManage').attr({                    checked: true                });            }            if ($selectedPlayerLog === 'T') {                $('#playerLog').attr({                    checked: true                });            }            if ($selectedServerManage === 'T') {                $('#serverManage').attr({                    checked: true                });            }            if ($selectedUserManage === 'T') {                $('#userManage').attr({                    checked: true                });            }            showBg();            $("#editUserDiv").show();        }    }));// 关闭 弹窗$(document).ready(    $('.cancelBtn').click(function () {        $('#addUserDiv').hide();        $('#editUserDiv').hide();        closeBg();    }));// 显示 灰色遮罩层function showBg() {    var $bh = $('body').height();    var $bw = $('body').width();    $('#fullBg').css({        height: $bh,        width: $bw,        display: 'block'    });    $('#fullBg').show();}// 关闭 灰色遮罩层function closeBg() {    $('#fullBg').hide();}