弹窗插件zDialog使用教程

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=" 取消 ";
            });

来源：https://www.cnblogs.com/007sx/p/5727629.html

标签

zdialog

diag