您的位置：首页 > 其它

弹窗插件zDialog使用教程

2018-01-09 16:10 316 查看
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=" 取消 ";
});
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航