Magnific Popup与Ajax购物车滑块冲突，代码无法正常运行

你的核心问题是点击Magnific Popup外部遮罩关闭弹窗时，购物车关闭逻辑的元素判断范围和执行逻辑存在偏差：

1. Magnific Popup的遮罩层（.mfp-bg）和弹窗容器（.mfp-container）是直接挂载在<body>下的，不属于#cart-notification的子节点，所以点击遮罩时会触发购物车关闭的初始判断条件（点击目标不在购物车或触发按钮内）。
2. 虽然你通过弹窗回调修改了imgshow属性，但实际场景中，点击遮罩时购物车关闭逻辑的执行优先级可能导致判断时的状态出现异常，或者你的判断逻辑没有覆盖到Magnific Popup的元素范围。

方案一：直接利用Magnific Popup内置状态判断（推荐） #

放弃自定义imgshow属性，直接调用Magnific Popup的内置状态方法，避免属性同步问题：

修改购物车关闭的代码：

if(!$(event.target).closest('#cart-notification').length && !$(event.target).closest('[data-href="#cart-notification"]').length){
  // 检查Magnific Popup是否处于打开状态
  const popupIsOpen = $.magnificPopup.instance && $.magnificPopup.instance.isOpen;
  if($('[data-href="#cart-notification"]').attr("aria-expanded") == "true" && !popupIsOpen) {
    $("#cart-notification").removeClass("active");
    $('[data-href="#cart-notification"]').attr("aria-expanded","false");
  }
}

同时可以移除Magnific Popup回调中修改imgshow的代码，简化整体逻辑。

方案二：补充排除Magnific Popup元素的判断条件 #

在购物车关闭的初始判断中，添加对Magnific Popup相关元素的排除，确保点击弹窗或遮罩时不会触发购物车关闭：

if(!$(event.target).closest('#cart-notification').length && 
   !$(event.target).closest('[data-href="#cart-notification"]').length &&
   // 排除Magnific Popup的遮罩和容器元素
   !$(event.target).closest('.mfp-bg, .mfp-container').length){
  if($('[data-href="#cart-notification"]').attr("aria-expanded") == "true" && $('[data-href="#cart-notification"]').attr("imgshow") == "false") {
    $("#cart-notification").removeClass("active");
    $('[data-href="#cart-notification"]').attr("aria-expanded","false");
  }
}

这个方案无需改动你现有的imgshow属性逻辑，仅需补充判断范围即可。

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