.NET Razor视图中如何点击屏幕或切换标签页时自动关闭日历弹窗？

代码放置位置 #

将以下脚本添加到_Layout.cshtml的</body>标签之前，这个位置能确保页面DOM元素和jQuery都已加载完成，保证脚本正常执行。

具体实现代码 #

<script>
    $(document).ready(function() {
        // 点击页面任意非弹窗区域关闭日历
        $(document).on('click', function(e) {
            // 替换为你的日历弹窗、触发图标的实际ID
            const calendarPopup = $('#your-calendar-popup-id');
            const calendarTriggerIcon = $('#your-calendar-icon-id');
            const closeBtn = $('#idofmycloseimage');

            // 判断点击目标是否不属于弹窗、触发图标或关闭按钮
            if (!calendarPopup.is(e.target) && calendarPopup.has(e.target).length === 0 &&
                !calendarTriggerIcon.is(e.target) && calendarTriggerIcon.has(e.target).length === 0) {
                closeBtn.trigger('click');
            }
        });

        // 切换标签页时自动关闭日历弹窗
        document.addEventListener('visibilitychange', function() {
            // 当页面隐藏（切换到其他标签）时触发关闭
            if (document.hidden) {
                $('#idofmycloseimage').trigger('click');
            }
        });
    });
</script>

关键说明 #

• 替换代码中的your-calendar-popup-id和your-calendar-icon-id为你项目中日历弹窗和触发图标的实际ID，确保能准确判断点击范围。
• 使用$(document).on绑定事件，兼容动态生成的日历弹窗（如果你的弹窗是异步渲染的）。
• visibilitychange事件监听页面可见性变化，完美解决切换标签页时弹窗残留的问题。

内容的提问来源于stack exchange，提问作者Fahad Ashiq