1. First now good zdialog then copy the project
2. Configure Zdialog Images folder location after decompression
Images storage location According to their actual project, zdialog.js configuration location, such as:
var imagespath = '/images/'; Picture path Configuration
3. Pop-up box HTML and JS code writing:
<!DOCTYPE HTML Public "-//W3C//DTD XHTML 1.0 transitional//en" "http://www.w3.org/TR/xhtml1/DTD/ Xhtml1-transitional.dtd "><HTMLxmlns= "http://www.w3.org/1999/xhtml"><Head><Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8"> <Metaname= "Copyright"content= "Cool station code http://www.5icool.org/" /> <Scripttype= "Text/javascript"src= "/js/jquery.min.js"></Script> <Scripttype= "Text/javascript"src= "/js/datepattern.js"></Script> <Scripttype= "Text/javascript"src= "/zdialog/zdrag.js"></Script> <Scripttype= "Text/javascript"src= "/zdialog/zdialog.js"></Script> <Scripttype= "Text/javascript"> $(function(){ functionfun1 () {}functionfun2 () {parentdialog.close (); } functionfun3 () {} $.ajax ({URL:"/frame/user/userdetails", type:"Get", ContentType:"Application/json;charset=utf-8", DataType:"JSON", Success:function(data) {$.each (Data.datas,function(i,n) {$ ("#userName"). Val (N.username); $("#role"). Val (N.role); $("#email"). Val (N.email); $("#createTime"). Val (NewDate (n.createtime). Pattern ("YYYY-MM-DD Hh:mm:ss")); }); } }); }); </Script></Head><Body> <DivID= "Forlogin"> <Tablewidth= "100%"Border= "0"Align= "Center"cellpadding= "4"cellspacing= "4"> <TR> <TDwidth= "+"Align= "Right"> <span>User name:</span> </TD> <TD> <inputtype= "text"ID= "UserName"style= "width:220px;"/> </TD> </TR> <TR> <TDwidth= "+"Align= "Right"> <span>Role:</span> </TD> <TD> <inputtype= "text"ID= "Role"Disabled= "true"style= "width:220px;"/> </TD> </TR> <TR> <TDwidth= "+"Align= "Right"> <span>Mailbox:</span> </TD> <TD> <inputtype= "text"ID= "Email"style= "width:220px;"/> </TD> </TR> <TR> <TDwidth= "+"Align= "Right"> <span>Registration time:</span> </TD> <TD> <inputtype= "text"ID= "Createtime"Disabled= "true"style= "width:220px;"/> </TD> </TR> </Table> </Div></Body></HTML>
Popup pop-up window:
//Personal Settings$ ("#userName"). Click (function(){ varDiag =NewDialog (); Diag. Width= 400; Diag. Height= 170; Diag. Title= "User Information"; Diag. URL= "/views/userdetails_zdialog.html"; Diag. Okevent=function() {//method to invoke after clicking OK varUserName = diag.innerFrame.contentWindow.document.getElementById (' UserName ')). Value; varemail = diag.innerFrame.contentWindow.document.getElementById (' email '). Value; $.ajax ({URL:"/frame/user/updateuserdetails", type:"POST", ContentType:"Application/json;charset=utf-8", data:JSON.stringify ({"UserName": UserName,"Email": Email}), DataType:"JSON", Success:function(data) {diag.close (); if(data.message== "modified successfully!")) {Dialog.alert (data.message); } Else if(Data.message.indexOf ("Re-Login Now") > 0) {alert (data.message); Window.location.href= '/views/login.html '; } } }); }; Diag.show (); Diag.okButton.value= "Modify"; Diag.cancelButton.value= "Cancel"; });
Pop-up window plugin Zdialog use tutorial