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. jQuery判断复选框是否勾选

    一个功能复选框勾选时给input表单赋值,复选框取消时将表单值清除. 功能:复选框勾选时给input表单赋值,复选框取消时将表单值清除. 实现源码:cyfID为复选框的id $("#cyfI ...

  2. 教你如何写thinkphp多表查询语句

    1.table()函数 thinkphp中提供了一个table()函数,具体用法参考以下语句: $list=$Demo->table('think_blog blog,think_type ty ...

  3. eclipse中maven项目部署到tomcat [转]

    其实maven项目部署到tomcat的方式很多,我从一开始的打war包到tomcat/webapps目录,到使用tomcat-maven插件,到直接使用servers部署,一路来走过很多弯路. 下面就 ...

  4. ubantu 文件系统的目录结构

      对于每一个Linux学习者来说,了解Linux文件系统的目录结构,是学好Linux的至关重要的一步.,深入了解linux文件目录结构的标准和每个目录的详细功能,对于我们用好linux系统只管重要, ...

  5. LeetCode: Word Break II 解题报告

    Word Break II Given a string s and a dictionary of words dict, add spaces in s to construct a senten ...

  6. java 多线程4: java线程的优先级

    Java线程的优先级取值范围是1 (Thread.MIN_PRIORITY ) 到 10 (Thread.MAX_PRIORITY ).如果没有设置, 线程默认的优先级是NORM_PRIORITY.这 ...

  7. JavaScript(js)文件路径字符串中丢失"\"斜线的解决方法

    在刚刚的开发过程中,遇到一个JavaScript 文件路径字符串中丢失"\"的问题,解决过程如下: 背景:cs文件中获取一段包含有路径信息的字符串,将此字符串做为参数传递给前台as ...

  8. asp.net显示用户信息

    web.config <?xml version="1.0" encoding="utf-8"?> <!-- 有关如何配置 ASP.NET 应 ...

  9. 在input中回车后页面提交导致出现HTTP 错误 405.0 - Method Not Allowed

    前些时间在做一个搜索功能时发现一个比較有意思的现象,场景是这种:在一个模态窗体中是一个订单列表.页面的顶部有若干个状态筛选框和一个搜索keyword输入框,当焦点在keyword输入框时按回车,本来是 ...

  10. 【WPF】CommandParameter解决多传参问题

    方法一:传参按钮控件自身绑定的ItemSource 用WAF框架实现MVVM,按钮的点击事件都要通过Command来传递到这个View对应的ViewModel上,再通过ViewModel传递到上层的C ...