zoukankan html css js c++ java

lhgdialog 与后台交互的对话框

官网：http://www.lhgdialog.com/

1. 调用打开dialog的按钮

2. 打开dialog的js

//更换经销商或取消订单
function CancelOrderOrChangeDealer(orderCode){
var status = $("#status").val();
var url="../order/CancelOrderOrChangeDealer.do?orderCode="+orderCode+"&status="+status;
//window.top.showModalDialog("../order/CancelOrderOrChangeDealer.do?orderCode="+orderCode+"&status="+status,window,"help:no;center:yes;dialogHeight:300;dialogWidth:600;dialogLeft:700;dialogTop:300;location:no");
//window.open ("../order/CancelOrderOrChangeDealer.do?orderCode="+orderCode+"&status="+status, 'newwindow', 'height=100, width=400, top=0,left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=yes, status=no');
//dialogHeight:400;dialogWidth:600;dialogLeft:700;dialogTop:300;",target="_self
//window.location.href ="../order/CancelOrderOrChangeDealer.do?orderCode="+orderCode+"&status="+status;
$.dialog({
content: 'url:'+url,
id:'lhgdialog',
lock : true,
'600px',
height: '300px',
title: '提示'

});
}

3. 子界面的即url的内容

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link href="${pageContext.request.contextPath }/static_resources/admin/css/base.css" rel="stylesheet" type="text/css" />
<link href="${pageContext.request.contextPath }/static_resources/admin/css/frame.css" rel="stylesheet" type="text/css" />
<link href="${pageContext.request.contextPath }/static_resources/admin/css/load.css" rel="stylesheet" type="text/css" />
<script type="text/javascript"
    src="${pageContext.request.contextPath}/static_resources/common_js/jquery-1.8.3.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>取消订单或更换经销商</title>
</head>
<body>
    <input id="orderCode" type="hidden" value="${orderCode }" />
    <input id="status" type="hidden" value="${status }" />
    <div class="md_tab"  style="auto">
        <div class="mBd">
            <table width="100%" class="b4">
                <tbody>
                    <tr>
                        <td colspan="2">
                        <div style="font-weight:600">
                            您可以重新换一家经销商，或者取消订单！
                        </div>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2"><span style="font-size:12px; color:red">*&nbsp;</span>取消原因:</td>
                    </tr>
                    <tr>
                        <td><label class="liradio"> <input type="radio"
                                onchange="thisReason()" checked="checked" id="reason"
                                value="现在不想买了" name="reason"> 现在不想买了
                        </label></td>
                        <td><label class="liradio"> <input type="radio"
                                onchange="thisReason()" id="reason" value="商品价格昂贵" name="reason">
                                商品价格昂贵
                        </label></td>
                    </tr>
                    <tr>
                        <td><label class="liradio"> <input type="radio"
                                onchange="thisReason()" id="reason" value="商家服务态度不好"
                                name="reason"> 商家服务态度不好
                        </label></td>
                        <td><label class="liradio"> <input type="radio"
                                onchange="thisReason()" id="reason" value="商品缺货" name="reason">
                                商品缺货
                        </label></td>
                    </tr>
                    <tr>
                        <td><label class="liradio"> <input type="radio"
                                onchange="thisReason()" id="reason" value="重复下单" name="reason">
                                重复下单
                        </label></td>
                        <td><label class="liradio"> <input type="radio"
                                onchange="thisReason()" value="商品质量有问题" name="reason">
                                商品质量有问题
                        </label></td>
                    </tr>
                    <tr>
                        <td colspan="2"><label class="liradio"> <input type="radio"
                                name="reason" onchange="otherReason()"> 其他原因
                        </label><input type="text"id="reasontextarea" style="display: none;  300px; vertical-align: bottom; margin-top: 5px;"></td>
                    </tr>
                    
                    
                </tbody>
            </table>
            
        </div>
        <div><br></br></div>
        <div  style="text-align:center">
                 <input type="button" class="sBtn"
                                value=" 换一家经销商 " onclick="changeDealer()" />
                                <input type="button" class="sBtn"
                                value="   取消订单   " onclick="cancelOrder()" />
                        
                    </div>
    </div>
</body>
<script type="text/javascript">
    //更换经销商
    function changeDealer() {
        var reason;
        var temp = document.getElementsByName("reason");
        for (var i = 0; i < temp.length; i++) {
            if (temp[i].checked)
                reason = temp[i].value;
        }
        
        
        var orderCode = $("#orderCode").val();
        var status = $("#status").val();
        if (reason == null || reason == "" || reason == "on") {
            reason = $("#reasontextarea").val();
            if (reason == null || reason == "") {
                alert("请选择或输入取消订单原因");
                return false;
            }
        }
        window.location.href = "../order/ChangeDealer.do?orderCode="
                + orderCode + "&reason=" + reason;
    }

    function otherReason() {
        
        document.getElementById("reasontextarea").style.display = "block";
    }

    function thisReason() {
        document.getElementById("reasontextarea").style.display = "none";
    }

    //取消订单
    function cancelOrder() {
        var orderCode = $("#orderCode").val();
        var status = $("#status").val();
        window.location.href = "../order/CancelOrderOrNot.do?orderCode="+ orderCode+"&status="+status;
    }
</script>
</html>

4. 最后关闭的界面及js

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link
    href="${pageContext.request.contextPath }/static_resources/admin/css/base.css"
    rel="stylesheet" type="text/css" />
<link
    href="${pageContext.request.contextPath }/static_resources/admin/css/frame.css"
    rel="stylesheet" type="text/css" />
<link
    href="${pageContext.request.contextPath }/static_resources/admin/css/load.css"
    rel="stylesheet" type="text/css" />
<script type="text/javascript"
    src="${pageContext.request.contextPath}/static_resources/common_js/jquery-1.8.3.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>取消订单或更换经销商</title>
</head>
<body>
    <input id="orderCode" type="hidden" value="${orderCode }" />
    <input id="status" type="hidden" value="${status }" />    
            <br></br>    
            <br></br>
            <div  style="font-size: 16px;text-align:center;color:rgb()">您选择”换一家经销商“，优价车将第一时间重新给您挑选优质经销商！</div>
            <br></br>
            <br></br>
            <div style="text-align:center">
            <input type="button" class="sBtn" value=" 确定换一家 "
                onclick="changeDealer()" /> <input type="button" class="sBtn"
                value="   取消    " onclick="cancelOrder()" />
        </div>

</body>
<script type="text/javascript">
    //更换经销商
    function changeDealer() {

        var orderCode = $("#orderCode").val();
        var status = $("#status").val();
//        window.location.href = "../order/DoChangeDealer.do?orderCode="
//                + orderCode + "&status=" + status;
                
                
        var Param = {
                orderCode : orderCode,
                status : status
        };    
        $.ajax({
                data : Param,
                type : 'POST',
                dataType : 'json',
                url : '../order/DoChangeDealer.do',
                
                error : function(data){
                    alert("网络出错");
                },
                success : function(data){
                    parent.location.reload();
                }
            });
    }
        
        //var api = frameElement.api;
        //api.close();
//    }

    //取消
    function cancelOrder() {
        //window.location.href = "../order/userOrderList.do";
        //var api = frameElement.api; 关闭窗口但不刷新父窗口
        //api.close();
        parent.location.reload();
    }
</script>
</html>

查看全文

相关阅读:
webpack篇
 js 中对于this 的理解的经典案例
 AMD、CMD、CommonJs和es6对比
 vue import异步加载js
vscode 保存自动格式化eslint 代码
 git设置
 面向对象的三大特性之继承
 面向对象类与对象及其属性与方法类的组合
 hashlib模块 hash算法
 configparser模块配置文件的解析操作

原文地址：https://www.cnblogs.com/weixiaole/p/4968530.html