分享一个好看的点击按钮弹窗html对话框代码

分享点击即可跳出一个自适应的弹窗，相关代码如下：

<style>

    .popup {
    display: none;
    position: fixed;
    top: 25%;
    left: 38%;
    width: 25%;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.2);
    z-index: 9999;
}

.popup-content {
    padding: 20px;
    text-align: center;
}

.close-button {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 24px;
    cursor: pointer;
}

.popup-text {
    margin-top: 10px;
}

.popup-text p {
    margin-bottom: 5px;
}

.popup img {
    width: 200px;
    height: auto;
}
</style>

<script>

    function togglePopup() {
    var popup = document.getElementById("popup");
    if (popup.style.display === "none" || popup.style.display === "") {
        popup.style.display = "block";
        document.body.style.overflow = "hidden"; // 遮罩效果，禁止滚动
    } else {
        popup.style.display = "none";
        document.body.style.overflow = "auto"; // 恢复滚动
    }
}
</script>

<div id="popup" class="popup">
        <div class="popup-content">
            <div class="close-button" onclick="togglePopup()" style="color:#00a99d;font-size: 34px;margin-right:20px">&times;关闭</div>
            <div class="popup-text">
                <p style="font-size: 24px;">标题</p>
                <p style="font-size: 18px;color: #f08326;">内容</p>
                <img src="https://image.heiqw.com/i/2024/05/12/uda874.png" width="120" height="120">
            </div>
        </div>
    </div>

    <div class="user">  
    <div class="nologin">
  <a class="login" onclick="togglePopup()">点击显示</a>
  <!--<a class="reg" href="#">注册</a>-->
</div>
    </div>