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. TinyXml 操作XML 常用操作

    源代码下载:http://sourceforge.net/projects/tinyxml/files/ 如下是一个XML片段:    <Persons>        <Perso ...

  2. js动态创建表格,删除行列的小例子

    js动态创建表格,删除行列的实例代码. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo ...

  3. 如何对多个文件进行MODELSIM仿真？ (由于是一个很大的项目，不可能把所有MODULE都放在一个文件里。 如何在ModelSim中对多个.V文件进行仿真？)

    可以将所有要编译的所有文件的名字做一个list.新建一个文本文档,重命名为vflist vflist内容例子如下(src为文件夹):src/base_addr_chk.vsrc/config_mux. ...

  4. [k8s] kubelet单组件启动静态pod

    kubelet单组件启动静态pod 无需k8s其他组件,单独下载kubelet的二进制,可以启动静态pod. 静态pod不受api管理,kubectl get po可以看到,但是kubectl del ...

  5. HDU 4565 So Easy!(公式化简+矩阵)

    转载:http://www.klogk.com/posts/hdu4565/ 这里写的非常好,看看就知道了啊. 题意很easy.a,b,n都是正整数.求 Sn=⌈(a+b√)n⌉%m,(a−1)2&l ...

  6. scheduleOnce

    //程序开始后延时2秒才开始addSprite函数 scheduleOnce(schedule_selector(Issue1305::addSprite), ); 转到定义: void CCNode ...

  7. linux io ports io memory

    http://m.blog.csdn.net/article/details?id=7204458

  8. Azure Cloud Application Design and Implementation Guidance performance-optimization

    https://github.com/mspnp/azure-guidance https://github.com/mspnp/performance-optimization https://gi ...

  9. 利用ForgeryPy生成虚拟数据

    在程序研发过程中,我们往往需要大量的虚拟实验数据.Python中有多个包可以用于生成虚拟数据,其中功能较为完善的是ForgeryPy. 1 安装 采用pip进行安装: pip install Forg ...

  10. dubbo注册zookeeper保错原因

    我的zookeeper是安装在本地,用的默认端口2181,版本3.4.10.dubbo版本2.5.8.dubbo-demo-provider.xml配置文件修改为:<dubbo:registry ...