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. 【转】用SQL实现树的查询

    树形结构是一类重要的非线性结构,在关系型数据库中如何对具有树形结构的表进行查询,从而得到所需的数据是一个常见的问题.本文笔者以 SQL Server 2000 为例,就一些常用的查询给出了相应的算法与 ...

  2. Python文件遍历二种方法

    分享下有关Python文件遍历的两种方法,使用的OS模块的os.walk和os.listdir实现. 关于Python的文件遍历,大概有两种方法,一种是较为便利的os.walk(),还有一种是利用os ...

  3. [sh]函数+条件表达式

    了解了下shell的函数和case语句: 函数格式: function(){ } 例子: function rsyncstart() { if [ "${status1}X" == ...

  4. mvn项目中的pom文件提示Error parsing lifecycle processing instructions解决

    清空.m2/repository下的所有依赖文件,重新下载即可解决该问题. 如果本地用户下没有.m2/repository 目录,找到如下mvn 指定的repository,进去之后清空所有文件.

  5. win下安装redis

    redis官方不提供win安装程序,github上有个开源项目提供. https://github.com/MSOpenTech/redis 微软开源团队维护 ## 目录 - 安装 - 启动 - 使用 ...

  6. js中特殊转换字符为html标签

    function htmlEncode(text){ return text.replace(/&/g,'&amp').replace(/\"/g,'&quot'). ...

  7. iOS-打包成ipa的4种方法

    打包ipa的前提 1.证书的申请和设置和上面文章的一样 从第一步到第四步都是一样的http://www.cnblogs.com/sunfuyou/p/5900592.html2.还有第六步的 1-3都 ...

  8. WEB只能输入固定的字符

    <head runat="server"> <title></title> <script type="text/javascr ...

  9. Java项目中如何扩展第三方jar包中的类？

    有些时候你对第三方得到jar包中的类并不是很满意,想根据实际情况做一些扩展.如果说第三方的jar包已经提供了一些可扩展的类,比如提供了Interceptor,Filter或者其他的类,那么使用原生的比 ...

  10. java资料——顺序存储结构和链式存储结构（转）

    顺序存储结构 主要优点 节省存储空间,随机存取表中元素 缺    点 插入和删除操作需要移动元素 在计算机中用一组地址连续的存储单元依次存储线性表的各个数据元素,称作线性表的顺序存储结构. 顺序存储结 ...