覆蓋並關閉彈出框

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> 

小提琴： http ： //jsfiddle.net/aabyxrvs/

Answer 2

我改變了幾件事，嘗試下面的代碼。

1. 不要將z-index屬性設置為負值，否則會損壞所有點擊事件！

    .profile1 { z-index:1; } 

2. 改變你的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); } 

3. 最后我假設了幾件事並改變了你的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>