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使用教程的更多相关文章

  1. thinkphp 点击某个class提交post值，返回回来用一个弹窗插件，提示返回来要说的话

    下一篇文章有讲到弹窗插件的怎么使用,自写教程 如果能帮到你,给点个赞鼓励一下 <=============  控制器  =================> public function ...

  2. Sublime Text 2安装汉化破解、插件包安装教程

    原文地址: Sublime Text 2安装汉化破解.插件包安装教程_百度经验 http://jingyan.baidu.com/article/ff4116259b057c12e48237b8.ht ...

  3. 阿里巴巴Java开发规约插件p3c详细教程及使用感受

    阿里巴巴Java开发手册 在进入正题介绍这款插件之前,首先来谈一下<阿里巴巴Java开发手册>,2017年年初,首次公开的阿里官方Java代码规范标准手册可以说是引起了全民(IT界)代码规 ...

  4. 40款非常棒的 jQuery 插件和制作教程（系列一）

    jQuery 在现在的 Web 开发项目中扮演着重要角色,jQuery 让网站有更好的可用性和用户体验,让访问者对网站留下非常好的印象.jQuery以其插件众多.独特.轻量以及支持大规模的网站开发闻名 ...

  5. Web APP & 弹窗插件

    Web APP & 弹窗插件 移动端弹窗插件 alert.confirm.toast.notice 四种类型弹窗 jQuery & Zepto https://github.com/s ...

  6. jquery弹窗插件layer：layer.layui.com

    这两天在做抽奖转盘功能,浏览器自带的alert弹出框太low,本人又基本不会前端, 于是借鉴前人用fancybox插件做的效果 结果没看懂其写法(http://www.0101shop.com/goo ...

  7. VS增加插件 Supercharger破解教程

    VS增加插件 Supercharger破解教程 Supercharger效果预览及下载路径: http://supercharger.tools/index.html 下载地址:https://vis ...

  8. JS编写简单的弹窗插件(含有demo和源码)

    最近项目做完了 事情不是很多,今天正好也在调休,所以趁着这个时间研究了一下简易的JS弹窗功能,当然网上这块插件非常多,本人也没有仔细看网上的插件源码 只是凭着日常使用过的弹窗插件有这么多功能 来实现自 ...

  9. Unity插件-NGUI使用教程

    Unity插件-NGUI使用教程 本文提供全流程,中文翻译.Chinar坚持将简单的生活方式,带给世人!(拥有更好的阅读体验 -- 高分辨率用户请根据需求调整网页缩放比例) 1 NGUI 一款强大的次 ...

随机推荐

  1. 《Effective Java》读书笔记八（异常）

    No57 只针对异常的情况才使用异常 异常应该只用于异常的情况下,它们永远不应该用于正常的控制流. No58 对可恢复的情况使用受检异常,对编程错误使用运行时异常 Java程序设计语言提供了三种可抛出 ...

  2. Wireshark分析网络慢

        tcp.analysis.retransmission tcp.flags.reset==1

  3. pause和resume

    CCSet *m_pPausedTargets;类的成员变量 void CCNode::schedule(SEL_SCHEDULE selector, float interval, unsigned ...

  4. 利用 FormData 对象发送 Key/Value 对的异步请求

    使用Key/Value对和FormData能够轻易地通过XMLHttpRequest指定要传递什么数据,它是一个非常强大的发送数据到服务器的方法. 基础 通常的方法是你创建一个 FormData 对象 ...

  5. boost.asio源码剖析(三) ---- 流程分析

    * 常见流程分析之一(Tcp异步连接) 我们用一个简单的demo分析Tcp异步连接的流程: #include <iostream> #include <boost/asio.hpp& ...

  6. tornado日志使用详解

    1.需求 将http访问记录,程序自定义日志输出到文件,按天分割,保留最近30天的日志. 2.使用示例 init_logging("%s/QYK.%s.%s.log" % (log ...

  7. python（33）多进程和多线程的区别

    多线程可以共享全局变量,多进程不能.多线程中,所有子线程的进程号相同:多进程中,不同的子进程进程号不同. #!/usr/bin/python # -*- coding:utf-8 -*- import ...

  8. 基于python的接口测试框架设计（二）配置一些参数及文件

    基于python的接口测试框架设计(二)配置一些参数及文件 我这里需要基于我的项目配置的主要是登陆参数.以及baseURL ,把这些放在单独的文件里  毕竟导入的时候方便了一些 首先是url 图略 建 ...

  9. LeetCode: Search for a Range 解题报告

    Search for a RangeGiven a sorted array of integers, find the starting and ending position of a given ...

  10. 多核CPU上python多线程并行的一个假象

    GIL 与 Python 线程的纠葛 GIL 是什么东西?它对我们的 python 程序会产生什么样的影响?我们先来看一个问题.运行下面这段 python 程序,CPU 占用率是多少? # 请勿在工作 ...