模态框功能实现

html：

<div class="dialog" id="editUserDiv" style="display: none">
    <h3>编辑管理员h3>
    <span class="cancelBtn">Xspan>
    <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">L1option>
                <option value="L2">L2option>
                <option value="L3">L3option>
            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();
}