覆盖并关闭弹出框

Question

我有一个弹出框并试图在它后面添加一个叠加层，并且当您在弹出框外单击时仍然能够将其关闭。我还希望能够在您单击关闭按钮时关闭该框。这是我到目前为止得到的：

<div class="profile1"> </div>


<div class="overlay"></div>
<div class="popup"> 
     <a class="close" href="#">CLOSE</a>
     <input type="submit" value="SUBMIT" id="submit" onclick="alert('CHANGES HAS BEEN SAVED')">
</div>

css

.profile1 {
margin-left:1.7%;
margin-top:6%;
height:40%;
width:18%;
background-color:#0D7BFF;
position:absolute;
z-index:-1;
border-radius:2px;
}
.overlay {
top:0%;
left:0%;
width:100%;
height:100%;
position:absolute;
background-color:#555454;
opacity:0.80;
z-index:2;
}
.popup {
top:20%;
left:27.5%;
height:20%;
width:45%;
background-color:#FDFDFD;
position:absolute;
border-radius:5px;
z-index:3;
-webkit-box-shadow: 0px 0px 10px 3px rgba(50, 50, 50, 0.75);
-moz-box-shadow:0px 0px 10px 3px rgba(50, 50, 50, 0.75);
box-shadow: 0px 0px 10px 3px rgba(50, 50, 50, 0.75);
}


#submit {
background:#0D7BFF; 
border:none;
cursor:pointer;
color:#FDFDFD;
font-size: 1.8vw;
font-family: Avenir Next;
width:50%;
right:0%;
bottom:0%;
position:absolute;
border-radius: 0px 0px 5px 0px;
text-align:center;
}

#submit:hover {
background-color:#004598;
transition: all 0.3s ease-out;
}

.close {
background:#0D7BFF; 
border:none;
cursor:pointer;
color:#FDFDFD;
font-size: 1.8vw;
font-family: Avenir Next;
width:50%;
left:0%;
bottom:0%;
top:76.5%;
position:absolute;
border-radius: 0px 0px 0px 5px;
text-decoration: none;
text-align:center;
}

.close:hover {
background-color:#004598;
transition: all 0.3s ease-out;
}

jquery

$(document).ready(function(){
$('.popup, .overlay').hide();
$(".profile1").click(function () {
        $(".popup, .overlay").show(300);
    });

 });

 $(document).mouseup(function (e) {
 var popup = $(".popup");
 if (!$('.popup').is(e.target) && !popup.is(e.target) &&   popup.has(e.target).length === 0) {
     popup.hide(250);
 }
 });

感谢所有帮助

Answer 1

好的，请尝试：

$(document).ready(function(){
  $('.popup, .overlay').hide();
  $(".profile1").click(function () {
    $(".popup, .overlay").show(300);
  });
});

 $(document).on("mouseup",".overlay",function (e) {
      $(".popup, .overlay").hide(250);
 });

 $(document).on("mouseup",".close",function (e) {
      $(".popup, .overlay").hide(250);
 });

.profile1 {
margin-left:1.7%;
margin-top:6%;
height:40%;
width:18%;
background-color:#0D7BFF;
position:absolute;
z-index:-1;
border-radius:2px;
}
.overlay {
top:0%;
left:0%;
width:100%;
height:100%;
position:absolute;
background-color:#555454;
opacity:0.80;
z-index:2;
}
.popup {
top:20%;
left:27.5%;
height:20%;
width:45%;
background-color:#FDFDFD;
position:absolute;
border-radius:5px;
z-index:3;
-webkit-box-shadow: 0px 0px 10px 3px rgba(50, 50, 50, 0.75);
-moz-box-shadow:0px 0px 10px 3px rgba(50, 50, 50, 0.75);
box-shadow: 0px 0px 10px 3px rgba(50, 50, 50, 0.75);
}


#submit {
background:#0D7BFF; 
border:none;
cursor:pointer;
color:#FDFDFD;
font-size: 1.8vw;
font-family: Avenir Next;
width:50%;
right:0%;
bottom:0%;
position:absolute;
border-radius: 0px 0px 5px 0px;
text-align:center;
}

#submit:hover {
background-color:#004598;
transition: all 0.3s ease-out;
}

.close {
background:#0D7BFF; 
border:none;
cursor:pointer;
color:#FDFDFD;
font-size: 1.8vw;
font-family: Avenir Next;
width:50%;
left:0%;
bottom:0%;
top:76.5%;
position:absolute;
border-radius: 0px 0px 0px 5px;
text-decoration: none;
text-align:center;
}

.close:hover {
background-color:#004598;
transition: all 0.3s ease-out;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="profile1"> </div>


<div class="overlay"></div>
<div class="popup"> 
     <a class="close" href="#">CLOSE</a>
     <input type="submit" value="SUBMIT" id="submit" onclick="alert('CHANGES HAS BEEN SAVED')">
</div>

fiddle: http://jsfiddle.net/aabyxrvs/

Answer 2

我改变了一些东西，试试下面的代码。

不要将 z-index 属性设置为负值，否则会损害所有点击事件！
```
.profile1 {    
  z-index:1;  
}
```

如下更改您的 js

$(document).ready(function(){

    $('.popup,.overlay').hide();

    $(".profile1").click(function () {
            $(".popup, .overlay").show(300);
    });

});

 $(document).mouseup(function (e) {
     var popup = $(".popup");
     if (!$('.popup').is(e.target) && !popup.is(e.target) &&   popup.has(e.target).length === 0) {
         hidePopup();
     }
 });

 function hidePopup()
 {
    $(".popup, .overlay").hide(300);
 }

最后我假设了一些事情并改变了你的 HTML 如下

 $(document).ready(function(){
  
  $('.popup,.overlay').hide();

  $(".profile1").click(function () {
    $(".popup, .overlay").show(300);
  });

 });

  $(document).mouseup(function (e) {
   var popup = $(".popup");
   if (!$('.popup').is(e.target) && !popup.is(e.target) &&   popup.has(e.target).length === 0) {
    hidePopup();
   }
  });
  
  function hidePopup()
  {
  $(".popup, .overlay").hide(300);
  }

.profile1 {
margin-left:1.7%;
margin-top:6%;
height:40%;
width:18%;
background-color:#0D7BFF;
position:absolute;
z-index:1;
border-radius:2px;
}
.overlay {
top:0%;
left:0%;
width:100%;
height:100%;
position:absolute;
background-color:#555454;
opacity:0.80;
z-index:2;
}
.popup {
top:20%;
left:27.5%;
height:20%;
width:45%;
background-color:#FDFDFD;
position:absolute;
border-radius:5px;
z-index:3;
-webkit-box-shadow: 0px 0px 10px 3px rgba(50, 50, 50, 0.75);
-moz-box-shadow:0px 0px 10px 3px rgba(50, 50, 50, 0.75);
box-shadow: 0px 0px 10px 3px rgba(50, 50, 50, 0.75);
}


#submit {
background:#0D7BFF; 
border:none;
cursor:pointer;
color:#FDFDFD;
font-size: 1.8vw;
font-family: Avenir Next;
width:50%;
right:0%;
bottom:0%;
position:absolute;
border-radius: 0px 0px 5px 0px;
text-align:center;
}

#submit:hover {
background-color:#004598;
transition: all 0.3s ease-out;
}

.close {
background:#0D7BFF; 
border:none;
cursor:pointer;
color:#FDFDFD;
font-size: 1.8vw;
font-family: Avenir Next;
width:50%;
left:0%;
bottom:0%;
top:76.5%;
position:absolute;
border-radius: 0px 0px 0px 5px;
text-decoration: none;
text-align:center;
}

.close:hover {
background-color:#004598;
transition: all 0.3s ease-out;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="profile1"> </div>
  <div class="overlay"></div>
  <div class="popup"> 
    <a class="close" onclick="hidePopup()" href="#">CLOSE</a>
    <input type="submit" value="SUBMIT" id="submit" onclick="alert('CHANGES HAS BEEN SAVED')">
  </div>

覆盖并关闭弹出框

Overlay and closing a popup box

html

javascript

css

jquery

overlay