请求为ASP.NET的Default.aspx页面添加带链接与关闭按钮的图片弹窗

你的页面已经加载了Bootstrap和jQuery，直接用Bootstrap的Modal组件就能快速实现需求，无需额外引入资源。按以下步骤修改代码：

1. 插入弹窗HTML结构 #

在<form id="frmXenia" runat="server">标签之后、<div class="box">之前添加弹窗代码：

<!-- 自定义弹窗 -->
<div class="modal fade" id="customPopup" tabindex="-1" role="dialog" aria-labelledby="popupTitle" aria-hidden="true">
    <div class="modal-dialog modal-lg"> <!-- 可改为modal-md/modal-sm调整弹窗尺寸 -->
        <div class="modal-content">
            <!-- 关闭按钮 -->
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
            <div class="modal-body text-center p-0">
                <!-- 弹窗图片 -->
                <img src="<%= Functions.SiteUrl %>images/popup-banner.jpg" alt="弹窗广告" class="img-fluid">
                <!-- 跳转链接 -->
                <a href="<%= Functions.SiteUrl %>promotion.aspx" class="btn btn-danger btn-lg mt-3 mb-4">查看优惠活动</a>
            </div>
        </div>
    </div>
</div>

2. 添加弹窗自定义样式 #

在页面<head>标签内，所有CSS引入代码之后（比如<%= Functions.InsertCSS("css/ttc", False)%>之后）添加样式：

<style>
    #customPopup .close {
        position: absolute;
        right: 15px;
        top: 10px;
        font-size: 32px;
        font-weight: bold;
        color: #fff;
        opacity: 0.8;
        z-index: 100;
        text-shadow: 0 1px 2px #000;
    }
    #customPopup .close:hover {
        opacity: 1;
        color: #fff;
    }
    #customPopup .modal-content {
        border: none;
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    }
</style>

3. 添加弹窗触发脚本 #

在页面底部所有JavaScript引入代码之后（比如<%= Functions.InsertJS("js/stickyfooter", True)%>之后）添加脚本：

<script>
    $(document).ready(function() {
        // 页面加载时自动显示弹窗
        // 可选：用sessionStorage实现仅首次访问显示
        if (!sessionStorage.getItem('popupShown')) {
            $('#customPopup').modal('show');
            sessionStorage.setItem('popupShown', 'true');
        }
    });
</script>

自定义说明 #

• 替换图片：将images/popup-banner.jpg改为你的图片路径
• 修改链接：将promotion.aspx改为你要跳转的页面地址
• 调整尺寸：将modal-lg改为modal-md或modal-sm可缩小弹窗
• 移除单次显示：删除sessionStorage相关代码，弹窗会每次加载都显示

内容的提问来源于stack exchange，提问作者Leander Lena