如何使一个模态消失如果它被点击在外面

提问者：小点点

如何使一个模态消失如果它被点击在外面

null

function modalopen(){
        document.getElementById("overlay").style.display='block';
        document.getElementById("modal").style.display='block';
    }
        function modalclose(){
        document.getElementById("overlay").style.display='none';
        document.getElementById("modal").style.display='none';
    }

.closex{
             border: none;
            background-color: transparent;
             font-weight: bold;
        }
        .open{
             border: none;
            background-color: dodgerblue;
            border-radius: 14px;
            width: 150px;
            height: 40px;
            font-size: 20px;
    }
        body{
            background-color: whitesmoke;
        }
        .modal{
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    transition: 200ms ease-in-out;
    border-radius: 10px;
    z-index: 10;
    background-color: white;
    width: 500px;
    max-width: 80%;
    font-family: Arial;
    border: 1px solid white;
    box-shadow: 0 60px 120px rgba(0, 0, 0, 0.14), 0 40px 160px rgba(0, 0, 0, 0.24);
   -webkit-animation: animatezoom 0.6s;
  animation: animatezoom 0.6s;
        }

@-webkit-keyframes animatezoom {
  from {-webkit-transform: translate(-50%,-50%) scale(0)} 
  to {-webkit-transform: translate(-50%,-50%) scale(1)}
}
  
@keyframes animatezoom {
  from {transform: translate(-50%,-50%) scale(0)} 
  to {transform: translate(-50%,-50%) scale(1)}
}

        .mhead{
            border-bottom: 1px solid rgba(0,0,0,0.5);
            padding: 15px 15px 15px;
            font-size: 22px;
        }
        .mbody{
            padding: 15px 15px 15px 15px;
            font-size: 19px
        }
        .close{
            margin-left: 330px;
        }
        #overlay{
             display: none;
    position: fixed;
        top: 0;
    left: 0;
    right: 0;
    bottom: 0;
background-color: rgba(0,0,0,0.5);
    pointer-events: none;
        }

<body>
        <div id="overlay"></div>
        <div class="modal" id="modal">
            <div class="mhead">Welcome!!!<span class="close"><button class="closex" onclick="modalclose()">&times;</button></span></div>
            <div class="mbody">
            welcome to this site we are very happy that you are using this site.nisi ita quem quibusdam pariatur varias familiaritatem singulis fugiat 
            praesentibus qui quid id firmissimum officia se eram praesentibus coniunctione 
            ne quibusdam quem nulla despicationes praesentibus familiaritatem eiusmod eu o 
            relinqueret malis irure deserunt ingeniis aliqua ex aliquip arbitrantur irure 
            exquisitaque ad multos singulis cernantur ab aliquip consectetur fore 
            voluptatibus coniunctione tractavissent quo id nostrud reprehenderit 
            cohaerescant si sunt fore velit illum iis eram proident si expetendis varias 
            exercitation officia anim eram firmissimum domesticarum sint et nisi duis 
            coniunctione laboris pariatur aut lorem ubi qui e arbitrantur quid quibusdam 
            ipsum cohaerescant duis eiusmod reprehenderit varias nam dolor ut dolor mentitum 
            graviterque
                </div>
        </div>
        <div align="center">
    <button onclick="modalopen()" class="open">Open Modal</button>
            </div>
    </body>

null

从上面的代码中，如果你点击按钮，它会通过设置它的显示为块来显示一个模式，现在我想要的是，当你点击模式之外的模式将会消失，有人能帮你写一个代码吗。我试过了

    var modal = document.getElementById('modal');

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}

但那不起作用
我已经检查了关于堆栈溢出的其他问题，但都不起作用

共3个答案

匿名用户

你已经拥有了所有的碎片，你只需要把它们全部拼凑在一起。从覆盖CSS中删除指针-events:none；，这样我们就可以单击它了。然后将onclick=“modalClose（）”添加到覆盖层中。就是这样。

null

function modalopen(){
        document.getElementById("overlay").style.display='block';
        document.getElementById("modal").style.display='block';
    }
        function modalclose(){
        document.getElementById("overlay").style.display='none';
        document.getElementById("modal").style.display='none';
    }

.closex{
             border: none;
            background-color: transparent;
             font-weight: bold;
        }
        .open{
             border: none;
            background-color: dodgerblue;
            border-radius: 14px;
            width: 150px;
            height: 40px;
            font-size: 20px;
    }
        body{
            background-color: whitesmoke;
        }
        .modal{
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    transition: 200ms ease-in-out;
    border-radius: 10px;
    z-index: 10;
    background-color: white;
    width: 500px;
    max-width: 80%;
    font-family: Arial;
    border: 1px solid white;
    box-shadow: 0 60px 120px rgba(0, 0, 0, 0.14), 0 40px 160px rgba(0, 0, 0, 0.24);
   -webkit-animation: animatezoom 0.6s;
  animation: animatezoom 0.6s;
        }

@-webkit-keyframes animatezoom {
  from {-webkit-transform: translate(-50%,-50%) scale(0)} 
  to {-webkit-transform: translate(-50%,-50%) scale(1)}
}
  
@keyframes animatezoom {
  from {transform: translate(-50%,-50%) scale(0)} 
  to {transform: translate(-50%,-50%) scale(1)}
}

        .mhead{
            border-bottom: 1px solid rgba(0,0,0,0.5);
            padding: 15px 15px 15px;
            font-size: 22px;
        }
        .mbody{
            padding: 15px 15px 15px 15px;
            font-size: 19px
        }
        .close{
            margin-left: 330px;
        }
        #overlay{
             display: none;
    position: fixed;
        top: 0;
    left: 0;
    right: 0;
    bottom: 0;
background-color: rgba(0,0,0,0.5);
        }

<body>
        <div id="overlay" onclick="modalclose()"></div>
        <div class="modal" id="modal">
            <div class="mhead">Welcome!!!<span class="close"><button class="closex" onclick="modalclose()">&times;</button></span></div>
            <div class="mbody">
            welcome to this site we are very happy that you are using this site.nisi ita quem quibusdam pariatur varias familiaritatem singulis fugiat 
            praesentibus qui quid id firmissimum officia se eram praesentibus coniunctione 
            ne quibusdam quem nulla despicationes praesentibus familiaritatem eiusmod eu o 
            relinqueret malis irure deserunt ingeniis aliqua ex aliquip arbitrantur irure 
            exquisitaque ad multos singulis cernantur ab aliquip consectetur fore 
            voluptatibus coniunctione tractavissent quo id nostrud reprehenderit 
            cohaerescant si sunt fore velit illum iis eram proident si expetendis varias 
            exercitation officia anim eram firmissimum domesticarum sint et nisi duis 
            coniunctione laboris pariatur aut lorem ubi qui e arbitrantur quid quibusdam 
            ipsum cohaerescant duis eiusmod reprehenderit varias nam dolor ut dolor mentitum 
            graviterque
                </div>
        </div>
        <div align="center">
    <button onclick="modalopen()" class="open">Open Modal</button>
            </div>
    </body>

匿名用户

您可以找到点击happem的位置，如下所示

    window.addEventListener("click", function(e) {
      if (document.getElementById("modalWindow").contains(e.target)) {
        alert("clicked inside");
      } else {
        alert("clicked outside");
      }
    });

匿名用户

情态动词本质上很简单。最基本的例子将由模态本身，关闭按钮内部（或有时在模态外部）和背景组成。

基本模式设置

现在你要做的是每当点击背景或关闭按钮时关闭模式。现在有一个设计决策要做，您可以在一个背景中包含modal，或者在DOM中保持它们在同一级别上。从你的例子我可以看出你选择了第二种选择。在本例中，您所需要做的就是将onClick事件添加到backdrop中。

<div id="overlay" onclick="modalclose()"></div>

如果您将modal包含在backdrop中，您还需要停止事件传播，因为modal中的任何单击都会触发它的父级（包括backdrop）onClick事件。

var modalElement = document.getElementById('modal');
modalElement.addEventListener('click', function(event){ 
    event.stopPropagation();
});