Table of contents
1. Display effect

button
Click the button to display the popup window
2. Code


<!DOCTYPE html>
<html>

<head>
    <title>自定义弹窗</title>
    <style>
        body,P{margin:0;padding:0;}
        .popup {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 9999;
        }

        .popup-inner {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            padding: 20px;
            background-image: url(https://lmg.jj20.com/up/allimg/4k/s/01/21092416063TI4-0-lp.jpg);
            width: 1160px;
            height: 635px;
            background-color: #fff;
            border-radius: 5px;
            box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
            text-align: center;
            max-width: 80%;
            overflow: auto;
            max-height: 80%;
        }

        .popup-close {
            position: absolute;
            top: 5px;
            right: 10px;
            font-size: 20px;
            color: #aaa;
            cursor: pointer;
        }
        .popup-inner li{margin-bottom: 6px;}
        .popup-inner li p{ display:inline-block; width: 350px; height: 58px; background-color: #e1deff; border: 1px solid #f6faff; font-size: 20px; line-height: 58px; text-align: center; color: #645488; border-radius: 7px;}
        .popup-inner div{font-weight: bold; color: #fff;}
        .popup-inner div p{ display:inline-block;}
        .popup-inner ul{padding-top: 25px; margin-bottom: 25px;}
        .popup-inner h2{font-size: 35px; color: #9f7cf1;}
        .popup-close{font-size: 45px;}
        li{list-style-type: none;}
        a{text-decoration: none; color: #f7eeee; font-weight: bold;}
        span{font-weight: bold; color: #f7eeee;}
    </style>
</head>

<body>
    <button onclick="showPopup()">打开弹窗</button>
    <div class="popup" id="popup">
        <div class="popup-inner"> <span class="popup-close" onclick="closePopup()">&times;</span>
            <h2>自定义弹窗标题</h2>
            <!-- <p>自定义弹窗内容</p> -->
            <ul>
                <li class="pop1" id="pop1">111</li>
            </ul>
            <div id="pop_1_box">
                222
            </div>
        </div>
    </div>

    <script>
        function showPopup() {
            document.getElementById("popup").style.display = "block";
            //document.getElementById('popup-inner').style.backgroundImage = "url(https://lmg.jj20.com/up/allimg/4k/s/01/21092416063TI4-0-lp.jpg)";
            let str = "";
            str = `<li>
                <p><b>时间</b></p>
                <p><b>姓名</b></p>
                <p><b>地址</b></p>
            </li>
            `;

            for (let i = 0; i < 6; i++) {
                str += `  <li>
            <p><b>2023-03-02</b></p>
            <p><b>张XX</b></p>
            <p><b>广东省深圳市XXXXXX</b></p>
            </li>`
            }
            document.getElementById("pop1").innerHTML=str;
            //document.getElementById("pop1").innerHTML = "New Content";

            let page = "";
            page += '<a href="javascript:;"  onclick="PTTSendClick(\'btn\',\'btn_top_pop2\',\'上一页\')">上一页</a>';
            page += '<p><span>1</span>/<span>1</span></p>';
            page += '<a href="javascript:;"  onclick="PTTSendClick(\'btn\',\'btn_down_pop2\',\'下一页\')">下一页</a>';
            document.getElementById("pop_1_box").innerHTML = page;
        }
        function closePopup() {
            document.getElementById("popup").style.display = "none";
        } 
    </script>
</body>

</html>
html+js realizes custom pop-up window

1. Display effect

2. Code

Guess you like
