I implemented a click tool to pop up a window, click inside the window to close the window, click outside to close the window! But I encountered a difficulty, that is, if according to the way I currently write, I want to click the tool again to close the window, and it seems that this requirement cannot be achieved!
I don't know how to change the code in this way, so that the window can be closed by clicking the tool?
Hope to get your help, I will be very grateful to everyone who helped me.
const className = ['delet_wrap', 'txt', 'btn_group', 'consider', 'confirm', 'tool'];
$('.tool').on('click', function(e) {
$(document).on('click', function(e) {
if (className.includes(e.target.className)) {
$('.delet_wrap').css('display', 'inline-block');
} else {
$('.delet_wrap').css('display', 'none');
}
})
})body {
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.tool {
position: relative;
text-decoration: none;
background-color: yellow;
border: 1px solid #222;
border-radius: 6px;
padding: 10px;
color: #222;
}
.tool .delet_wrap {
padding: 20px;
position: absolute;
bottom: -90px;
left: 10px;
background-color: #ccc;
border: 1px solid #222;
display: none;
z-index: 10;
}
.tool .delet_wrap p {
text-align: center;
}
.tool .delet_wrap .btn_group {
display: flex;
white-space: nowrap;
margin-top: 10px;
}
.tool .delet_wrap .btn_group .consider {
background-color: #fff;
border: 1px solid #222;
margin-right: 10px;
}
.tool .delet_wrap .btn_group .confirm {
text-decoration: none;
border: 1px solid #222;
margin-left: 10px;
background-color: #222;
color: #fff;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="javascript:;" class="tool">tool
<div class="delet_wrap" id="js-delet_wrap">
<p class="txt">Are you sure you want to close?</p>
<div class="btn_group">
<button class="consider">consider</button>
<button class="confirm">confirm</button>
</div>
</div>
</a>