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