Easyui---模态对话框实现ESC键一键锁屏（输入密码解锁）

最新推荐文章于 2022-05-15 18:45:45 发布

别打名名

最新推荐文章于 2022-05-15 18:45:45 发布

阅读量3.1k

点赞数

分类专栏： html/js/css/ajax 文章标签： easyui 模态对话框一键锁屏 php ajax

本文链接：https://blog.csdn.net/FreeApe/article/details/50782901

版权

html/js/css/ajax 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1 功能

通过按ESC键，促发模态对话框，从而使除了对话框之外的界面都不能操作，这样能够在工作人员离开时，防止别人操作页面，而只能通过本人的密码才能解除锁屏。

这里写图片描述

2 功能实现

通过jQuery的按键松开检测事件keyup()，当按下ESC松开时，会触发该事件，从而进入事件的运行函数keyup()，在这个函数里面我们将模态对话框调出来，从而锁屏。
锁屏后，模态对话框中可以输入密码和提交，将输入的内容进行ajax判断，密码正确则关闭模态对话框，密码错误不动作。

keyup事件运行函数

$(document).keyup(function(event){
    switch(event.keyCode){
        case 27:
            {
                //检测按键：ESC,锁住网页
                //alert("ESC");
                $('#dlg-lock').dialog('open').dialog('center');
                $('#lock_form').form('clear');                 
            }
            break;  
    }
});

模态对话框

<!-- 一键锁定屏幕解锁对话框 模态对话框 -->  
<div id="dlg-lock" class="easyui-dialog" style="width:360px;height:120px;" data-options="closed: true,modal:true,title:''">
    <form id="lock_form">
        <div style="float:left;">
            <label style="margin-right:5px;height:30px;font-size:12px;">解锁密码:</label>
            <input class="easyui-textbox" style="float:left;width:250px;height:30px;" type="password" id="unlock_passwd" data-options="required:true,prompt:'请输入解锁密码!'"/>
        </div>
        <div style="float:left;margin-left:115px;margin-top:5px;">
            <a href="javascript:void(0)" class="easyui-linkbutton c3" style="float:left;width:80px;height:26px;" onclick="unlockSubmit('{$login_name}');">提交</a>
        </div>          
    </form>
</div>

密码提交ajax处理

function unlockSubmit(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');                
            }
            else if(data == 0) {

            }
        },
        error: function(){
            alert("解锁出错！");                         
        }
    });     
}

后台处理代码

    public function unlockSubmit(){
        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');
        }       
    }