弹窗插件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使用教程相关推荐

sweetalert 显示html,SweetAlert 弹窗插件入门教程
说明功能说明:一款美的无可替代的弹窗插件同类文章这里是其他博主写的几篇,小编觉得挺不错的,大家可以与本文综合来看 ①CSDN 点击访问 ②博客园-北执点击访问 ③博客园-郁冬点击访问 ④闲云 ...
Unity插件-NGUI使用教程
Unity插件-NGUI使用教程本文提供全流程,中文翻译. Chinar坚持将简单的生活方式,带给世人! (拥有更好的阅读体验 -- 高分辨率用户请根据需求调整网页缩放比例) 1 NGUI 一款强大 ...
JQuery图表插件Highcharts示例教程
JQuery图表插件Highcharts示例教程,先上图,大伙Show一下效果:先上三个图,分别是曲线.柱状.扇形. 图表中的数据纯属于DEMO的测试数据,没有实际用意.下面讲下大致的实现步骤第一步 ...
jquery饼状图插件的指引线_JQuery图表插件Highcharts示例教程
JQuery图表插件Highcharts示例教程,先上图,大伙Show一下效果:先上三个图,分别是曲线.柱状.扇形. 图表中的数据纯属于DEMO的测试数据,没有实际用意.下面讲下大致的实现步骤第一步 ...
layer之jquery 弹窗插件（最后版本v1.8.5）
转载自 jquery 弹窗插件 layer jquery.layer版本(v1.8.5)下载地址注意:v1.8.5后改版移除各种API,构造方法改版 <!DOCTYPE html PUBLIC ...
40个新鲜出炉的 jQuery 插件和免费教程【上篇】转载自：梦想天空
40个新鲜出炉的 jQuery 插件和免费教程[上篇] 转载于:https://www.cnblogs.com/chenjunLovefan/archive/2012/07/23/2605003.ht ...
WordPress网站弹窗插件PopupPress插件
简介: PopupPress插件是一款基于lightbox的弹窗插件WordPress的弹窗插件,支持HTML文本弹窗.广告弹窗.图像相册弹窗.视频音频弹窗.PDF预览弹窗.Iframe内容.表单.幻 ...
FCPX插件:视频去闪烁插件DEFlicker安装教程
FCPX插件:视频去闪烁插件DEFlicker需要安装在final cut pro x mac版中使用,FCPX视频去闪烁插件包含deflicker high speed高速闪烁插件.deflicke ...
原生Js弹窗插件|web弹出层组件|对话框
wcPop.js 是一款基于原生javascript开发的前端 web版弹窗组件,遵循原生 H5/css3/JS 的书写规范,简单实用.拿来即用(压缩后仅10KB).已经兼容各大主流浏览器.内含多种 ...
dialog.js弹窗插件
从一开始使用alert来提示,到后来的jQuery手动写弹窗,再到后来使用layer弹窗插件来完成,到现在使用dialog插件来完成弹窗,一步步的摸索,一步步的收获. 现在在项目中大部分的弹窗都是使用 ...

弹窗插件zDialog使用教程

弹窗插件zDialog使用教程相关推荐

最新文章

热门文章