覆盖并关闭弹出框

时间：2015-12-07 08:10:44

标签： javascript jquery html css overlay

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

<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);
 }
 });

我感谢所有帮助

2 个答案:

答案 0 :(得分：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/

答案 1 :(得分：0)

我更改了几件事，请尝试以下代码。

  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 

    4. 	$(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>

相关问题
最新问题