如何实现鼠标移动或页面加载时触发打开CSS弹窗模态框（无jQuery方案优先）

原生JS解决方案（无jQuery依赖，优先推荐） #

方案1：鼠标移动触发（满足反爬虫需求） #

仅监听一次鼠标移动事件，触发后利用你现有CSS的:target规则显示弹窗，触发后立即移除监听避免重复执行，完全复用原有弹窗的打开/关闭逻辑，不需要修改现有CSS、HTML代码。
新增JS代码如下：

let popupTriggered = false;
document.addEventListener('mousemove', function triggerPopup() {
  // 避免重复触发
  if (popupTriggered) return;
  popupTriggered = true;
  // 修改地址哈希触发现有CSS的:target匹配规则
  location.hash = 'pop';
  // 移除监听事件，减少性能消耗
  document.removeEventListener('mousemove', triggerPopup);
});

方案2：页面加载完成自动触发 #

如果不需要鼠标移动判断，直接页面加载完成后自动弹出，用以下代码即可：

document.addEventListener('DOMContentLoaded', function() {
  location.hash = 'pop';
});

兼容方案（不想修改地址栏哈希） #

如果你不希望弹窗触发后地址栏出现#pop后缀，可以给现有CSS新增一行规则，和原有:target共用显示逻辑：

/* 在你现有.modalDialog:target的选择器后加.active即可 */
.modalDialog:target, .modalDialog.active {
  opacity: 1;
  pointer-events: auto;
}

对应修改JS逻辑，直接给弹窗元素加类名触发显示：

let popupTriggered = false;
const popupEl = document.getElementById('pop');
const closeBtn = popupEl.querySelector('a[href="#"]');

document.addEventListener('mousemove', function triggerPopup() {
  if (popupTriggered) return;
  popupTriggered = true;
  popupEl.classList.add('active');
  document.removeEventListener('mousemove', triggerPopup);
});

// 适配关闭按钮逻辑
closeBtn.addEventListener('click', function(e) {
  e.preventDefault();
  popupEl.classList.remove('active');
});

jQuery兼容方案（如果必须使用jQuery） #

同样完全复用现有CSS结构，鼠标移动触发代码如下：

let popupTriggered = false;
$(document).on('mousemove', function triggerPopup() {
  if (popupTriggered) return;
  popupTriggered = true;
  location.hash = 'pop';
  $(document).off('mousemove', triggerPopup);
});

页面加载触发版本：

$(function() {
  location.hash = 'pop';
});

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