單擊背景或按鈕時如何關閉圖層彈出視窗？-有解無憂

場景如下。

單擊背景或按鈕時如何關閉圖層彈出視窗？

默認狀態（無圖層彈出）
當我單擊按鈕時，會顯示圖層彈出視窗。
單擊按鈕或外部，將隱藏圖層彈出視窗。

當我單擊背景（外部）或按鈕時，我想關閉圖層彈出視窗。

我該如何使用 Vanilla JS 或 jquery？（基于 HTML）

如果您能回答，我將不勝感激。

uj5u.com熱心網友回復：

當您打開彈出視窗時，將單擊偵聽器附加到關閉它并洗掉偵聽器的正文。

uj5u.com熱心網友回復：

您可以使用此代碼

//use by id

document.getElementById(#id).style.display = 'block';
document.getElementById(#id).style.display = 'none';

//use by className 



document.getElementById(.className).style.display = 'none';
document.getElementById(.className).style.display = 'block';

或使用 jQuery

$(document).ready(function(){
       $("#id").click(function(event){
         // $("#id").toggle();
         // $("#id").hide();
         // $("#id").show();
       });
     });

uj5u.com熱心網友回復：

在 HTML 部分為您的圖層設定 id，例如id="layerPopup" Then 在您的 JS 代碼上為您的按鈕創建事件

$(document).on('click', '#btnId', function(){ 
    $("#layerPopup").hide();

});

uj5u.com熱心網友回復：

您應該出現一個覆寫整個身體的疊加層，并為其提供 css 屬性z-index以從按鈕降低，并在其上應用與我的代碼相同的單擊功能時

HTML

<div class="overlay"></div>

CSS

.overlay{
   background-color: transparent;
   inset: 0;
   position: fixed;
   z-index: 100;
   display: none;
}

button{
 z-index: 101;
}

查詢

$('button').click(function(){
    $('.overlay, popup').toggle();
});

$('.overlay').click(function(){
    $('.overlay, popup').hide();
});

uj5u.com熱心網友回復：

處理這種情況的一種標準方法是在彈出視窗后面放置一個背景 div，然后向其添加一個事件偵聽器。您可以選擇更改背景的背景顏色以明顯增加彈出的美感。

.backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 10;
  background: rgba(0, 0, 0, 0.75);
}

.modal {
  position: fixed;
  top: 30vh;
  left: 10%;
  width: 80%;
  z-index: 100;
  overflow: hidden;
}

<div class="backdrop" />
<div class="modal" />

然后你可以在背景上添加一個事件監聽器：

$(document).on('click', '.backdrop', function(){ 
    $(".modal").hide();
});

PS：可能有一些語法問題！

轉載請註明出處，本文鏈接：https://www.uj5u.com/net/339264.html

標籤：javascript 查询

上一篇：禁用日期時間范圍選擇器中的所有日期

下一篇：在文本之前添加影像