弹窗插件zDialog使用教程
1.首先现在好zDialog然后复制项目中
2.配置zDialog解压以后images文件夹位置
images存放位置根据自己实际项目而定，zDialog.js中配置位置即可，如：
var IMAGESPATH = '/images/'; //图片路径配置
3.弹出框html以及js代码编写：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="Copyright" content="酷站代码 http://www.5icool.org/" /> <script type="text/javascript" src="/js/jquery.min.js"></script> <script type="text/javascript" src="/js/datepattern.js"></script> <script type="text/javascript" src="/zDialog/zDrag.js"></script> <script type="text/javascript" src="/zDialog/zDialog.js"></script> <script type="text/javascript"> $(function(){ function fun1(){ } function fun2(){ parentDialog.close(); } function fun3(){ } $.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(new Date(n.createTime).pattern("yyyy-MM-dd hh:mm:ss")); }); } }); }); </script> </head> <body> <div id="forlogin"> <table width="100%" border="0" align="center" cellpadding="4" cellspacing="4"> <tr> <td width="100" align="right"> <span>用户名：</span> </td> <td> <input type="text" id="userName" style="width:220px;"/> </td> </tr> <tr> <td width="100" align="right"> <span>角色：</span> </td> <td> <input type="text" id="role" disabled="true" style="width:220px;"/> </td> </tr> <tr> <td width="100" align="right"> <span>邮箱：</span> </td> <td> <input type="text" id="email" style="width:220px;"/> </td> </tr> <tr> <td width="100" align="right"> <span>注册时间：</span> </td> <td> <input type="text" id="createTime" disabled="true" style="width:220px;"/> </td> </tr> </table> </div> </body> </html>
弹出弹窗：
//个人设置 $("#userName").click(function(){ var diag = new Dialog(); diag.Width = 400; diag.Height = 170; diag.Title = "用户信息"; diag.URL = "/views/userDetails_zDialog.html"; diag.OKEvent = function() { //点击确定后调用的方法 var userName = diag.innerFrame.contentWindow.document.getElementById('userName').value; var email = 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=="修改成功!") { Dialog.alert(data.message); } else if (data.message.indexOf("立即重新登录") > 0) { alert(data.message); window.location.href = '/views/login.html'; } } }); }; diag.show(); diag.okButton.value=" 修改 "; diag.cancelButton.value=" 取消 "; });
