Easyui---modal dialog box realizes one-click lock screen with ESC key (enter password to unlock)

1 Function

?? By pressing the ESC key, the modal dialog box is triggered, so that the interface except the dialog box cannot be operated. This can prevent others from operating the page when the staff leaves, and only The lock screen can be unlocked through your own password.

2 Function implementation

??Through jQuery's key release detection event keyup(), when ESC is released, the event will be triggered, thus entering the event's running function keyup(), in In this function, we call out the modal dialog box to lock the screen.
??After locking the screen, you can enter the password and submit it in the modal dialog box. The input content will be judged by ajax. If the password is correct, the modal dialog box will be closed. If the password is incorrect, no action will be taken.

<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>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>form</span><span>id</span>=<span>"lock_form"</span>><span>div</span><span>style</span>=<span>"float:left;"</span>><span>label</span><span>style</span>=<span>"margin-right:5px;height:30px;font-size:12px;"</span>>解锁密码:<span><span>label</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>div</span>></span><span>div</span><span>style</span>=<span>"float:left;margin-left:115px;margin-top:5px;"</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>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>

').addClass('pre-numbering').hide(); $(this).addClass('has-numbering').parent().append($numbering); for (i = 1; i ').text(i)); }; $numbering.fadeIn(1700); }); });

The above introduces Easyui---modal dialog box to realize one-click lock screen with ESC key (enter password to unlock), including the relevant content. I hope it will be helpful to friends who are interested in PHP tutorials.