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

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了Easyui---模态对话框实现ESC键一键锁屏（输入密码解锁），小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2376字，纯文字阅读大概需要4分钟。

内容图文

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

内容总结

以上是互联网集市为您收集整理的Easyui---模态对话框实现ESC键一键锁屏（输入密码解锁）全部内容，希望文章能够帮你解决Easyui---模态对话框实现ESC键一键锁屏（输入密码解锁）所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

---