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

2 功能实现
??通过jQuery的按键松开检测事件keyup(),当按下ESC松开时,会触发该事件,从而进入事件的运行函数keyup(),在这个函数里面我们将模态对话框调出来,从而锁屏。
??锁屏后,模态对话框中可以输入密码和提交,将输入的内容进行ajax判断,密码正确则关闭模态对话框,密码错误不动作。
<code>keyup事件运行函数 </code>
<code>$(document).keyup(<span><span>function</span><span>(event)</span>{</span><span>switch</span>(event.keyCode){
<span>case</span><span>27</span>:
{
<span>//检测按键:ESC,锁住网页</span><span>//alert("ESC");</span>
$(<span>'#dlg-lock'</span>).dialog(<span>'open'</span>).dialog(<span>'center'</span>);
$(<span>'#lock_form'</span>).form(<span>'clear'</span>);
}
<span>break</span>;
}
});</code><code>模态对话框 </code>
<code><span><!-- 一键锁定屏幕解锁对话框 模态对话框 --></span><span><<span>div</span><span>id</span>=<span>"dlg-lock"</span><span>class</span>=<span>"easyui-dialog"</span><span>style</span>=<span>"width:360px;height:120px;"</span><span>data-options</span>=<span>"closed: true,modal:true,title:''"</span>></span><span><<span>form</span><span>id</span>=<span>"lock_form"</span>></span><span><<span>div</span><span>style</span>=<span>"float:left;"</span>></span><span><<span>label</span><span>style</span>=<span>"margin-right:5px;height:30px;font-size:12px;"</span>></span>解锁密码:<span></<span>label</span>></span><span><<span>input</span><span>class</span>=<span>"easyui-textbox"</span><span>style</span>=<span>"float:left;width:250px;height:30px;"</span><span>type</span>=<span>"password"</span><span>id</span>=<span>"unlock_passwd"</span><span>data-options</span>=<span>"required:true,prompt:'请输入解锁密码!'"</span>/></span><span></<span>div</span>></span><span><<span>div</span><span>style</span>=<span>"float:left;margin-left:115px;margin-top:5px;"</span>></span><span><<span>a</span><span>href</span>=<span>"javascript:void(0)"</span><span>class</span>=<span>"easyui-linkbutton c3"</span><span>style</span>=<span>"float:left;width:80px;height:26px;"</span><span>onclick</span>=<span>"unlockSubmit('{$login_name}');"</span>></span>提交<span></<span>a</span>></span><span></<span>div</span>></span><span></<span>form</span>></span><span></<span>div</span>></span></code><code>密码提交ajax处理 </code>
<code><span><span>function</span><span>unlockSubmit</span><span>(login_name)</span>
{</span><span>var</span> passwd = document.getElementById(<span>'unlock_passwd'</span>).value;
$.ajax({
url: localhostPaht + <span>'/Home/Operator/unlockSubmit/'</span>,
type: <span>'POST'</span>,
dataType: <span>'json'</span>,
data: {
<span>'passwd'</span>: passwd,
<span>'login_name'</span>:login_name
},
success: <span><span>function</span><span>(data)</span>{</span><span>if</span>(data == <span>1</span>){
$(<span>'#dlg-lock'</span>).dialog(<span>'close'</span>);
}
<span>else</span><span>if</span>(data == <span>0</span>) {
}
},
error: <span><span>function</span><span>()</span>{</span>
alert(<span>"解锁出错!"</span>);
}
});
}</code><code>后台处理代码 </code>
<code><span>public</span><span><span>function</span><span>unlockSubmit</span><span>()</span>{</span><span>if</span>(IS_POST){
<span>$passwd</span> = <span>$_POST</span>[<span>'passwd'</span>];
<span>$login_name</span> = <span>$_POST</span>[<span>'login_name'</span>];
}
<span>$passwd</span> = md5(<span>$passwd</span>);
<span>$sql</span> = <span>"select count(*) as count from t_user where login_name='%s' and passwd='%s';"</span>;
<span>$data</span> = M()->query(<span>$sql</span>,<span>$login_name</span>,<span>$passwd</span>);
<span>if</span>(<span>$data</span>[<span>0</span>][<span>'count'</span>] > <span>0</span>){
<span>$this</span>->ajaxReturn(<span>'1'</span>);
}
<span>else</span> {
<span>$this</span>->ajaxReturn(<span>'0'</span>);
}
}</code>以上就介绍了Easyui---模态对话框实现ESC键一键锁屏(输入密码解锁),包括了方面的内容,希望对PHP教程有兴趣的朋友有所帮助。
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移,垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是,许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号