html+css+jquery实现页面弹窗

最新推荐文章于 2023-07-13 22:16:09 发布

Aaron_1127

最新推荐文章于 2023-07-13 22:16:09 发布

阅读量1k

点赞数

分类专栏： # jquery 文章标签：弹窗

本文链接：https://blog.csdn.net/weixin_43398820/article/details/103283793

版权

jquery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

实现：点击一个按钮，在当前页面出现一个弹窗，弹窗内容为后台传过来的一个不定长度的字符数组。

html代码为：

<!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="popWindowHead">
                <div class="orderTitle">消费记录</div>
            </div>
            <div class="popWindowMsg">
                <div id="orderList"></div>
            </div>
        </div>        
    </div>
    <!-- 弹窗内容-end -->
</body>
</html>

css代码为：

    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;
    }

js代码为：

    $(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 popWindow = document.getElementById('popWindow');
        window.onclick = function close(e) {
            if (e.target == popWindow) {
                $("#popWindow").css("display","none");
            }
        }

    })