Close div by close button click or body click by jQuery
In this code there are two elements, a div which acts like a pop up and a button which is clicked to show the div. This snippet enables you to close div by close button click or body click by jQuery like a popup. Though we usually use modals and other pop ups yet sometimes this code is quite helpful.
Along with a little styling is also done to get a view able layout.
Here is the code to show div like a popup in JQuery.
Let’s see the snippet:
<div id="div-to-toggle" style="display: none;">
<button id="close-btn">X</button>
<h1>This is heading</h1>
<p>This a Paragraph in the div for demonstration.</p>
</div>
The div with id=”div-to-toggle” is meant to hide and show. It also has a close button i.e, button with id=”close-btn” which also can be clicked to close/hide the div.
To show the div I used a button with id=”click-to-show” which needs to be clicked. Instead of a button you can use any other element, for example an anchor tag/hyperlink any div or span etc. I have place the button inside a div for styling the code for the button is:
<div class="btn-container">
<button id="click-to-show">Click to display popup</button>
</div>
The main part is the script given below.
<script>
$('#click-to-show, #div-to-toggle').click(function (e) {
if ($(e.target).attr('id') != 'close-btn') {
$('#div-to-toggle').show();
event.stopPropagation();
}
});
$('body, #close-btn').click(function () {
$('#div-to-toggle').hide();
event.stopPropagation();
})
</script>
On click of #click-to-show and #div-to-toggle (# denotes id) #div-to-toggle is shown, but if the target of click is #close-btn then it is not shown, instead on click event of #close-btn is called which for both #close-btn and body resulting the hidden # div-to-toggle.
The complete code is:
<!DOCTYPE html>
<html>
<head>
<title>Sample Code</title>
</head>
<body>
<style>
body{
background: #cae4e4;
margin: auto;
min-height: 800px;
}
#div-to-toggle{
border: 1px solid Black;
padding: 15px 15px 15px 15px;
margin: 20px auto;
width: 30%;
background: #fff;
overflow: visible;
box-shadow: 3px 3px 8px #555;
position: relative;
}
#close-btn{
position: absolute;
background: #fff;
border: 2px solid #999;
color: #555;
border-radius: 12px;
height:25px;
width:25px;
padding: 1px;
top: -10px;
right: -10px;
box-shadow: 2px 2px 10px #555;
font-weight: bold;
cursor: pointer;
}
.btn-container{
width: 300px;
margin: 10px auto;
text-align: center;
clear: both;
}
.btn-container button{
height: 35px;
}
</style>
<div class="btn-container">
<button id="click-to-show">Click to display popup</button>
</div>
<div id="div-to-toggle" style="display: none;">
<button id="close-btn">X</button>
<h1>This is heading</h1>
<p>This a Paragraph in the div for demonstration.</p>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$('#click-to-show, #div-to-toggle').click(function (e) {
if ($(e.target).attr('id') != 'close-btn') {
$('#div-to-toggle').show();
event.stopPropagation();
}
});
$('body, #close-btn').click(function () {
$('#div-to-toggle').hide();
event.stopPropagation();
})
</script>
</html>
sd