模態框功能實現

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();
}