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

模态对话框

<pid="dlg-lock"class="easyui-dialog"style="width:360px;height:120px;"data-options="closed: true,modal:true,title:''"><formid="lock_form"><pstyle="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:'请输入解锁密码!'"/>p><pstyle="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>p>form>p>

密码提交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教程有兴趣的朋友有所帮助。