Easyui---模態對話框實現ESC鍵一鍵鎖定畫面（輸入密碼解鎖）

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

以上就介紹了Easyui---模態對話框實現ESC鍵一鍵鎖定螢幕（輸入密碼解鎖），包含了方面的內容，希望對PHP教程有興趣的朋友有所幫助。