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. Hadoop2.x介绍与源代码编译

    1.Hadoop 项目的四大模块 Hadoop Common: The common utilities that support the other Hadoop modules. Hadoop D ...

  2. Hypothesis Testing

    Hypothesis Testing What's Hypothesis Testing(假设检验) Hypothesis testing is the statistical assessment ...

  3. android Button背景高度被拉伸问题--解决方案

    接入第三方SDK后,发现SDK提供的弹窗里,有两个按钮的高度呈被拉伸状态. 而,第三方提供的demo内,这两个按钮均呈正常状态. 对于第一次接触Android的菜鸟来说,这个问题颇为难解.第三方在尝试 ...

  4. Python 下载excel

    上面源码 View:result_list是一个list为数据,当为list时,用enumerate可以获取到list的值和值所在序号 xlsx = openpyxl.Workbook() table ...

  5. Consumer

    Description FJ is going to do some shopping, and before that, he needs some boxes to carry the diffe ...

  6. 可视化工具连接mysql报1862【mysql修改登录密码】

    1862是密码被修改了. 修改方法: 1.以root登录账户: 账户与密码都是root mysql -uroot -proot 2.修改密码 set password = password('1234 ...

  7. DOS下运行C++程序配置

    闲来无事,想想C++是否一样能用dos来,编译运行程序呢,于是上网搜搜结果喜人,详见 http://blog.csdn.net/xiaoqinpeng/article/details/6556843 ...

  8. mysql自增id获取失败

    php 数据库pdo对象,如果是返回,如以下伪代码 function getData(){ return $data; } $data = getData(); $id = $data->las ...

  9. docker探索-在centos6.5中安装docker（三）

    1.要求 centos6.5中需要64位 centos6.5的linux内核需要3.x(centos的内核是2.6) 2.查看当前系统的位数和版本 [root@jacky jacky]# uname ...

  10. POI生成EXCEL，公式不自动执行的有关问题

    POI生成EXCEL,公式不自动执行的问题 场景:POI读取Excel模板. 当使用POI操作Excel时,发现由POI生成的公式能够在打开Excel是被执行, 而事先手工写入Excel模板文件的公式 ...