Easyui---模態對話方塊實現ESC鍵一鍵鎖屏（輸入密碼解鎖）

1 功能

??通過按ESC鍵，促發模態對話方塊，從而使除了對話方塊之外的介面都不能操作，這樣能夠在工作人員離開時，防止別人操作頁面，而只能通過本人的密碼才能解除鎖屏。

2 功能實現

??通過jQuery的按鍵鬆開檢測事件keyup()，當按下ESC鬆開時，會觸發該事件，從而進入事件的運行函數keyup()，在這個函數裡面我們將模態對話方塊調出來，從而鎖屏。
??鎖屏後，模態對話方塊中可以輸入密碼和提交，將輸入的內容進行ajax判斷，密碼正確則關閉模態對話方塊，密碼錯誤不動作。

keyup事件運行函數

$(document).keyup(function(event){switch(event.keyCode){        case27:            {                //檢測按鍵：ESC,鎖住網頁//alert("ESC");                $('#dlg-lock').dialog('open').dialog('center');                $('#lock_form').form('clear');                             }            break;      }});

模態對話方塊

<divid="dlg-lock"class="easyui-dialog"style="width:360px;height:120px;"data-options="closed: true,modal:true,title:''"><formid="lock_form"><divstyle="float:left;"><labelstyle="margin-right:5px;height:30px;font-size:12px;">解鎖密碼:label><inputclass="easyui-textbox"style="float:left;width:250px;height:30px;"type="password"id="unlock_passwd"data-options="required:true,prompt:'請輸入解鎖密碼!'"/>div><divstyle="float:left;margin-left:115px;margin-top:5px;"><ahref="javascript:void(0)"class="easyui-linkbutton c3"style="float:left;width:80px;height:26px;"onclick="unlockSubmit('{$login_name}');">提交a>div>form>div>

密碼提交ajax處理

functionunlockSubmit(login_name){var passwd = document.getElementById('unlock_passwd').value;    $.ajax({        url: localhostPaht + '/Home/Operator/unlockSubmit/',        type: 'POST',        dataType: 'json',        data: {            'passwd': passwd,            'login_name':login_name        },        success: function(data){if(data == 1){                                              $('#dlg-lock').dialog('close');                            }            elseif(data == 0) {            }        },        error: function(){            alert("解鎖出錯！");                                 }    });     }

幕後處理代碼

publicfunctionunlockSubmit(){if(IS_POST){            $passwd = $_POST['passwd'];            $login_name = $_POST['login_name'];        }           $passwd = md5($passwd);               $sql = "select count(*) as count from t_user where login_name='%s' and passwd='%s';";        $data = M()->query($sql,$login_name,$passwd);        if($data[0]['count'] > 0){            $this->ajaxReturn('1');        }        else {            $this->ajaxReturn('0');        }           }

').addClass('pre-numbering').hide(); $(this).addClass('has-numbering').parent().append($numbering); for (i = 1; i <= lines; i++) { $numbering.append($('

').text(i)); }; $numbering.fadeIn(1700); }); });

以上就介紹了Easyui---模態對話方塊實現ESC鍵一鍵鎖屏（輸入密碼解鎖），包括了方面的內容，希望對PHP教程有興趣的朋友有所協助。

