弹窗插件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=" 取消 ";
});
弹窗插件zDialog使用教程的更多相关文章
- thinkphp 点击某个class提交post值，返回回来用一个弹窗插件，提示返回来要说的话
下一篇文章有讲到弹窗插件的怎么使用,自写教程 如果能帮到你,给点个赞鼓励一下 <============= 控制器 =================> public function ...
- Sublime Text 2安装汉化破解、插件包安装教程
原文地址: Sublime Text 2安装汉化破解.插件包安装教程_百度经验 http://jingyan.baidu.com/article/ff4116259b057c12e48237b8.ht ...
- 阿里巴巴Java开发规约插件p3c详细教程及使用感受
阿里巴巴Java开发手册 在进入正题介绍这款插件之前,首先来谈一下<阿里巴巴Java开发手册>,2017年年初,首次公开的阿里官方Java代码规范标准手册可以说是引起了全民(IT界)代码规 ...
- 40款非常棒的 jQuery 插件和制作教程（系列一）
jQuery 在现在的 Web 开发项目中扮演着重要角色,jQuery 让网站有更好的可用性和用户体验,让访问者对网站留下非常好的印象.jQuery以其插件众多.独特.轻量以及支持大规模的网站开发闻名 ...
- Web APP & 弹窗插件
Web APP & 弹窗插件 移动端弹窗插件 alert.confirm.toast.notice 四种类型弹窗 jQuery & Zepto https://github.com/s ...
- jquery弹窗插件layer：layer.layui.com
这两天在做抽奖转盘功能,浏览器自带的alert弹出框太low,本人又基本不会前端, 于是借鉴前人用fancybox插件做的效果 结果没看懂其写法(http://www.0101shop.com/goo ...
- VS增加插件 Supercharger破解教程
VS增加插件 Supercharger破解教程 Supercharger效果预览及下载路径: http://supercharger.tools/index.html 下载地址:https://vis ...
- JS编写简单的弹窗插件(含有demo和源码)
最近项目做完了 事情不是很多,今天正好也在调休,所以趁着这个时间研究了一下简易的JS弹窗功能,当然网上这块插件非常多,本人也没有仔细看网上的插件源码 只是凭着日常使用过的弹窗插件有这么多功能 来实现自 ...
- Unity插件-NGUI使用教程
Unity插件-NGUI使用教程 本文提供全流程,中文翻译.Chinar坚持将简单的生活方式,带给世人!(拥有更好的阅读体验 -- 高分辨率用户请根据需求调整网页缩放比例) 1 NGUI 一款强大的次 ...
随机推荐
- Oracle学习笔记之四，SQL语言入门
1. SQL语言概述 1.1 SQL语言特点 集合性,SQL可以的高层的数据结构上进行工作,工作时不是单条地处理记录,而对数据进行成组的处理. 统一性,操作任务主要包括:查询数据:插入.修改和删除数据 ...
- RhinoMock学习-Stub方法
// Arrange var stub = MockRepository.GenerateStub<IDemo>(); stub.Stub(x => x.StringArgStrin ...
- ：c#的remoting里，CallContext.GetData获得的对象老是空的？该怎么处理
寻求帮助:c#的remoting里,CallContext.GetData获得的对象老是空的?如题,检查了很多次了,也比对了msdn里的例子,没觉得有问题啊..为什么老是得到的null的?不知道哪里出 ...
- GCC实现多文件编译,静态库,动态库
一 代码 //add.h int add(int a, int b); //add.c int add(int a, int b) { return a+b; } //main.c #incl ...
- STL_算法_查找算法(lower_bound、upper_bound、equal_range)
C++ Primer 学习中. .. 简单记录下我的学习过程 (代码为主) //全部容器适用(O(log(n))) 已序区间查找算法 lower_bound() //找第一个符合的 ...
- angular学习笔记(十四)-$watch(3)
同样的例子,还可以这样写: <!DOCTYPE html> <html ng-app> <head> <title>11.3$watch监控数据变化&l ...
- cvs history，CVS中查询目录下所有文件的提交记录
我们习惯用eclipse svn中查看一个目录下,甚至整个工程下,所有的文件的变更列表:操作为:右键工程 -> Team -> Show History. 最近在使用CVS,eclipse ...
- 深入理解Eureka - Eureka Client获取注册信息机制
深入理解Eureka - Eureka Client获取注册信息机 Eureka Client提供了定时获取注册信息的机制.Eureka Client获取注册信息的所有逻辑都在DiscoveryCli ...
- axel命令 文件下载
axel是Linux下一个不错的HTTP/ftp高速下载工具.支持多线程下载.断点续传,且可以从多个地址或者从一个地址的多个连接来下载同一个文件.适合网速不给力时多线程下载提高下载速度.比如在国内VP ...
- PowerShell中实现人机交互
编写脚本的过程中有很多时候需要进行人机交互,比如我写一个脚本,需要动态的输入一些内容,比如用户名和密码之类的东西,这些是没办法事先写进代码里的.而通过外部文件进行信息读取,友好性又差了点.所以当我们需 ...