基于模態可見性的jQuery設定元素樣式在Firefox和Chrome中的行為不同

我是 jquery 和 javascript 的新手。我有一個網站，其中包含多個通過 CSS 選擇器觸發的獨特模式/彈出視窗，:target將它們設定為display: block. 我正在嘗試使用 jquery 來隱藏一個單獨的元素。

邏輯是：
如果模態框可見，則隱藏元素。其他顯示元素。我目前在我的 jquery 中使用 popstate。這是因為如果用戶按下瀏覽器的后退按鈕，模式可能會關閉。所以我不想使用任何點擊功能。一切似乎都運行良好，除了檢測模式可見性的 if/else 陳述句似乎在 Firefox 和 Chrome 之間表現不同？當它在 Firefox 中隱藏元素時，它會顯示為 Chrome。當它在 Chrome 中隱藏時，它會在 Firefox 中顯示。為什么會出現相反的行為？我究竟做錯了什么？

$(window).on('popstate', function(event) {
  if ($('.modal').is(':visible')) {
    console.log("Modal ON");
    $('#wrapper').css('overflow-y', 'hidden');
    $('#extra_element').css('display', 'none');
  } else {
    console.log("Modal OFF");
    $('#wrapper').css('overflow-y', 'scroll');
    $('#extra_element').css('display', 'block');
  }
});

.modal {
  display: none;
  width: 100px;
  height: 100px;
  background-color: red;
  margin: 0 auto;
}

.modal:target {
  display: block;
}

#extra_element {
  width: 100vw;
  height: 20vh;
  background-color: yellow;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div id="extra_element">This element should hide when modal is open</div>

<div>
  <a href="#content">Click Me To Open Modal</a>
  <div id="content" class="modal">I'm a Modal. Press browser back button to close 
  </div>
</div>

備用 jQuery：

將長度設定為 1 在 Firefox 中有效，而在 Chrome 中則相反。
將長度設定為 0 在 Chrome 中有效，而在 Firefox 中則相反。

$(window).on('popstate', function(event) {
    if ( $('.modal-overlay:visible').length === 1 ) {
        console.log("Modal ON");
        $('#wrapper').css('overflow-y', 'hidden');
        $('#extra_element').css('display', 'none');
    }
    else {
        console.log("Modal OFF");
        $('#wrapper').css('overflow-y', 'scroll');
        $('#extra_element').css('display', 'block');
    }
});

還有另一種方法可以正確地做到這一點嗎？

uj5u.com熱心網友回復：

根據規范，這將是一個 Chrome 錯誤，在歷史遍歷演算法的第 10 步，UA 應該呼叫負責更新檔案的目標元素( :target) 的“滾動到片段”演算法，并且僅在第 18.1 步呼叫它應該觸發popstate事件。Chrome 在更新檔案的目標元素
之前會觸發該事件，因此您的 CSS選擇器還不匹配。 我確實打開了一個問題，因此他們使這個符合標準，但暫時您可以通過在事件觸發后等待一個任務來解決這個問題：:target

$(window).on('popstate', async function(event) {
  await new Promise(res => setTimeout(() => res()));
  if ($('.modal').is(':visible')) {
    console.log("Modal ON");
    $('#wrapper').css('overflow-y', 'hidden');
    $('#extra_element').css('display', 'none');
  } else {
    console.log("Modal OFF");
    $('#wrapper').css('overflow-y', 'scroll');
    $('#extra_element').css('display', 'block');
  }
});

.modal {
  display: none;
  width: 100px;
  height: 100px;
  background-color: red;
  margin: 0 auto;
}

.modal:target {
  display: block;
}

#extra_element {
  width: 100vw;
  height: 20vh;
  background-color: yellow;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div id="extra_element">This element should hide when modal is open</div>

<div>
  <a href="#content">Click Me To Open Modal</a>
  <div id="content" class="modal">Press browser back button to close 
  </div>
</div>

標籤：html jQuery css 谷歌浏览器 火狐

上一篇：無法在不同的用戶中運行docker容器

下一篇：為什么這段文字會轉化為url