Easyui---Modal dialog box to implement ESC key lock screen (enter password unlock)

1 features

?? By pressing ESC the key, the modal dialog box is made so that the interface can not be manipulated except for the dialog box, so that it can prevent others from manipulating the page when the worker leaves, but only through my password to unlock the screen.

2 function implementation

?? Releasing the detection event KeyUp () via the jquery key, when ESC released, triggers the event to enter the event's Run function KeyUp (), in which we switch the modal dialog box to lock the screen.
?? After the lock screen, the modal dialog box can enter the password and submit, the input content for Ajax judgment, the password is correct to close modal dialog box, password error does not action.

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;" >Unlock Password: 
     Label
 ><inputclass="Easyui-textbox"style="float:left;width:250px; height:30px; " type="password"id="unlock_passwd"data-options="Required: True,prompt: ' Please enter the unlock password! ' /> 
     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} ');" >Submit 
     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 () Unlocked Error!                                 ");     }    }); }

  background processing code  
 

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

The above describes the Easyui---modal dialog box to implement the ESC key lock screen (enter the password unlock), including the content, I hope that the PHP tutorial interested friends helpful.

