我正在為我的網站構建一個設定選單，該選單將顯示為一個彈出視窗。目前，我可以通過單擊鏈接到它的按鈕來打開/關閉此彈出視窗。但是，我想實作一種方法，只需在彈出視窗外部單擊即可關閉此彈出視窗/div。
我相信 JavaScript 可以完成這個動作，不幸的是，我還不精通使用這種語言。
有沒有人有滿足我需求的解決方案，這就是我正在使用的...
提前致謝 ：）
var settingsmenu = document.querySelector(".settings-menu");
function settingsMenuToggle(){
settingsmenu.classList.toggle("settings-menu-height");
}.settings-menu{
position: absolute;
width: 90%;
max-width: 350px;
background: var(--color-light);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
border-radius: 4px;
overflow: hidden;
top: 84px;
right: 9%;
max-height: 0;
transition: max-height 0.3s;
}
.settings-menu-height{
max-height: 300px;
}
.settings-menu-inner{
padding: 20px;
}<div class="create">
<figure onclick="settingsMenuToggle()">
<button>Open Popup</button>
</figure>
</div>
<div class="settings-menu">
<div class="settings-menu-inner">
<figure>
<img src="https://images.macrumors.com/t/Y_7ongT7QQ-k0uYwUE4uCoCO3TI=/800x0/article-new/2019/08/apple-settings-icon-19.jpg-250x250.jpg?lossy" width="100" height="100">
<h3>This is a popup</h3>
</figure>
</div>
</div>uj5u.com熱心網友回復：
這很容易，您將當前的彈出框包裝在一個額外的 div 中；所以如果你目前有：
<div class="settings-menu">
...stuff...
</div>
然后你把它變成：
<div class="popover-backplate">
<div class="settings-menu">
...stuff...
</div>
</div>
接下來，您添加一些 CSS，例如：
.popover-backplate {
position: fixed;
width: 100vw;
height: 100vh;
background-color: red;
opacity: 0.5;
}
如果這樣做有效，那么整個頁面上應該有一個半透明的紅色覆寫（無論如何都在彈出視窗之外）。如果不是這種情況，那么您可能必須z-index向兩者settings-menu和/或popover-backplate.
一旦視覺部分作業，剩下的就是在popover-backplates onclick-event下添加一些 javascript ，它呼叫您的-function popover_close()（無論它被呼叫什么）。
uj5u.com熱心網友回復：
您可以將彈出視窗包裝在另一個元素中 - 這是最簡單的方法之一。比方說，它會有“tint”類，并且里面會包含你的彈出式div。并且為了在后臺捕獲事件，您可以在檔案中添加一個事件偵聽器，并且每次都檢查單擊目標。如果點擊目標是背景（即我們的“tint”），我們只是隱藏“tint”元素，并且事件不會再次觸發，因為它有一次：true。否則我們再次設定事件。當然，這只是一個簡單的演示片段。您可以擴展它并根據需要對其進行修改。
function documentLoaded(fn) {
if (document.attachEvent ? document.readyState === "complete" : document.readyState !== "loading"){
fn();
} else {
document.addEventListener('DOMContentLoaded', fn);
}
}
function popupClickListener(e){
if (e.target.classList.contains('tint')) {
document.querySelector('.tint').style.display = 'none';
} else {
document.addEventListener('click', popupClickListener, {once: true});
}
}
documentLoaded(function(){
document.querySelector('.show-popup').onclick = function(){
document.querySelector('.tint').style.display = 'block';
document.addEventListener('click', popupClickListener, {once: true});
}
});.tint {
position: fixed;
display: none;
width: 100%;
height: 100vh;
overflow-y: auto;
overflow-x: hidden;
background: rgba(0, 0, 0, 0.7);
z-index: 10000;
left: 0;
right: 0;
top: 0;
bottom: 0;
text-align: center;
vertical-align: middle;
}
.popup {
position: relative;
display: inline-block;
background: #fff;
width: calc(100% - 20px);
max-width: 550px;
min-height: 130px;
margin: 50px 10px;
border-radius: 10px;
vertical-align: middle;
overflow: hidden;
-webkit-transform: translateZ(0px);
}<div class="tint">
<div class="popup">popup-content</div>
</div>
<div class="page-content">
some content<br>
<button class="show-popup">show popup</button>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/387176.html
標籤：javascript html css 弹出 隐藏