My question is:
- Clicking on OPEN should open the popup.
- Clicking on BACK should close the popup.
- Clicking outside the popup should also close it.
Note: Clicking inside the popup when it is open should not close it. The popup should only close on an outside click or by clicking on BACK.
The current behavior is that clicking anywhere opens and closes the popup. How can I achieve the desired behavior? I have prepared a JSFiddle and Code Snippet.
$('#open-1').on('click touch', function() {
$("#card-1").toggleClass("flip")
});
$(document).on('click touch', function(event) {
if (!$(event.target).parents().addBack().is('#open-1')) {
$("#card-1").toggleClass("flip");
}
});
$('#open-1').on('click touch', function(event) {
event.stopPropagation();
});.panel {
width: 45%;
display: inline-block;
margin-bottom: 20px;
background-color: #fff;
margin: 14px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
}
.est {
box-shadow: 0px 0px 0px #333;
background-color: transparent;
}
div {
display: block;
}
#card-1 {
height: 300px;
width: 100%;
margin: 0 auto;
z-index: 1;
display: inline-block;
perspective: 700px;
}
.flip .front {
transform: rotateY(180deg);
}
.front {
transform: rotateY(0deg);
overflow: hidden;
z-index: 1;
}
.front,
.back {
border: 1px solid #ddd;
height: 100%;
width: 100%;
position: absolute;
left: 0;
top: 0;
transform-style: preserve-3d;
backface-visibility: hidden;
}
.ease {
-webkit-transition: all .45s ease-out 0s;
-moz-transition: all .45s ease-out 0s;
-ms-transition: all .45s ease-out 0s;
-o-transition: all .45s ease-out 0s;
transition: all .45s ease-out 0s;
}
.open-1,
.open-2,
.open-3,
.open-4,
.open-5 {
font-size: 14px;
font-weight: 500;
text-transform: uppercase;
line-height: 50px;
}
.back {
transform: rotateY(180deg);
background-color: #ddd;
display: table;
z-index: 2;
font-size: 13px;
line-height: 23px;
padding: 10px 20px;
height: 320px;
}
.info {
color: #333;
font-size: 20px;
z-index: 9999;
}
.flip .back {
transform: rotateY(360deg);
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="panel e-b est"> <div class="wrapper">
<div id="card-1">
<div class="front ease">
<a href="javascript:void" class="open-1" id="open-1">open</a>
<p>
test content
</p>
</div>
<div class="back ease">
<div class="back-info">
<div class="info">
test content
</div>
</div>
<div class="social-bar"><a href="javascript:void" class="open-1">Back</a></div>
</div>
</div> </div> </div>