html+css+jquery页面弹窗案例代码 jq当点击弹窗外的其他区域时，关闭弹窗

本文链接：https://blog.csdn.net/withkai44/article/details/134705975

文章描述了如何使用HTML和JavaScript（包括jQuery库）创建一个弹窗，以及如何通过后台返回的JSON数据动态填充弹窗中的内容。内容涉及DOM操作，如创建元素并插入到页面中，以及处理弹窗的显示和关闭事件。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <title>弹窗</title>
</head>
<body>
 <button id="popWindowBtn">弹窗测试</button>
    <!-- 弹窗内容-start -->
    <div id="popWindow">
        <div class="popWindowContent">

        <div class="xxxx123" id="xxxx123" onclick="eeeeeeeeee()">X</div>

            <div class="popWindowHead">
                <div class="orderTitle">弹窗测试</div>
            </div>
            <div class="popWindowMsg">
                <div id="orderList"></div>
            </div>
        </div>        
    </div>
    <!-- 弹窗内容-end -->
</body>
</html>

实现出来的界面效果：

在这里插入图片描述

$(function() {
    //onData是后台返回的字符串，里面的orderDetailList是一个不定长度的数组
    var onData = "{"+                        
            "\"orderDetailList\":["+
                "{ \"orderId\":\"1000001695916351\",\"totalFee\":\"18\",\"tradeDate\":\"2019-11-13 05:01:58\"},"+
                "{ \"orderId\":\"1000001695916347\",\"totalFee\":\"52\",\"tradeDate\":\"2019-11-22 14:54:44\"},"+
                "{ \"orderId\":\"1000000000006564\",\"totalFee\":\"18\",\"tradeDate\":\"2019-11-24 13:30:44\"}"+
            "]}";
    onData = JSON.parse(onData)
    //注意使用JSON.parse()把字符串转换成json的格式，字符串要满足一定格式：
    //1. 字符串必须是在大括号里面的：{}
    //2. 键值对都必须带双引号，例如："orderId":"74184147"
    $("#popWindowBtn").on("click",function(){
        $("#popWindow").css("display","block");
        var orderList = document.getElementById("orderList");
        orderList.innerHTML = "";
        //因为从后台获取的数组是不定长度的，暂时没想到其它办法，目前只能使用下面的方法。
        for (var i = 0;i<onData.orderDetailList.length;i++) {
            var table = document.createElement("table");

            var tr1 = document.createElement("tr");
            var td1_1 = document.createElement("td");
            var td1_2 = document.createElement("td");
            td1_1.innerHTML = "订单编号：";
            td1_2.innerHTML = onData.orderDetailList[i].orderId;
            tr1.appendChild(td1_1);
            tr1.appendChild(td1_2);

            var tr2 = document.createElement("tr");
            var td2_1 = document.createElement("td");
            var td2_2 = document.createElement("td");
            td2_1.innerHTML = "支付金额：";
            td2_2.innerHTML = "￥"+onData.orderDetailList[i].totalFee+".00";
            tr2.appendChild(td2_1);
            tr2.appendChild(td2_2);

            var tr3 = document.createElement("tr");
            var td3_1 = document.createElement("td");
            var td3_2 = document.createElement("td");
            td3_1.innerHTML = "支付时间：";
            td3_2.innerHTML = onData.orderDetailList[i].tradeDate;
            tr3.appendChild(td3_1);
            tr3.appendChild(td3_2);

            table.appendChild(tr1);
            table.appendChild(tr2);
            table.appendChild(tr3);

            var hr = document.createElement("hr");
            orderList.appendChild(table);
            orderList.appendChild(hr);
        }
    })

 var xxxx123 = document.getElementById('xxxx123');
        xxxx123.onclick = function close2(e) {
        $("#popWindow").css("display","none");
        }

   //当点击弹窗外的其他区域时，关闭弹窗
    var popWindow = document.getElementById('popWindow');
    window.onclick = function close(e) {
        if (e.target == popWindow) {
            $("#popWindow").css("display","none");
        }
    }

})

body,html{
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    background-color: gray;
}

button{
    border-radius: 5px;
    cursor: pointer;
    border: 0;
    margin: 100px 100px;
}

#popWindow {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    /* background-color: rgba(0,0,0,0.5); */
}
.popWindowContent {
    background:#2A3D53;
    width: 40%;
    height: 60%;
    overflow-y: auto;
    z-index: 1;
    margin: 12% auto;
}
#popWindow .popWindowContent .orderTitle{
    margin: 5% 5%;
    font-size:200%;
    font-family:PingFang SC;
    font-weight:500;
    color:rgba(255,255,255,1);
    text-align: center;
}
.popWindowMsg #orderList td{
    font-size:120%;
    font-family:PingFang SC;
    font-weight:400;
    color:white;
    /*margin-left: 5px;*/
}
hr{
    width:50%;
    background-color:#2A3D53;
}
.popWindowMsg table {
    margin: auto;
}