Introduction
हेलो दोस्तों आज हम इस post में jQuery का इस्तेमाल करके एक simple सा popup modal box button के click पर open कराएँगे!, और साथ modal box के बहार body पर click करने पर इस popup modal box को close कराएँगे, Popup modal box open और close करने के लिए हमें jQuery library के जरुरत होगी और इस jQuery library का इस्तेमाल करके हम modal box को close और open करने का हमारा code लिखेंगे!.
Create and open modal popup box using HTML,CSS, jQuery
HTML code
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Page Title</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<button id="openPopup">Open Popup</button>
<div id="popupOverlay">
<div id="popupBox">
<div class="popupHeader">
<h2>Popup Header</h2>
<span class="close">×</span>
</div>
<div class="popupBody">
<p>This is the popup content body.</p>
<p>You can add any content here.</p>
</div>
<div class="popupFooter">
<button id="closePopup">Close</button>
</div>
</div>
</div>
</body>
</html>
CSS code
<style>
#popupOverlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 9999;
}
#popupBox {
background-color: #fff;
width: 400px;
max-width: 80%;
margin: 100px auto;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
.popupHeader {
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid #ccc;
padding-bottom: 10px;
margin-bottom: 10px;
}
.popupHeader h2 {
margin: 0;
}
.close {
cursor: pointer;
}
.popupBody {
padding-bottom: 20px;
}
.popupFooter {
text-align: right;
}
</style>
jQuery Code
<script>
$(document).ready(function() {
$('#openPopup').click(function() {
$('#popupOverlay').show();
});
$(document).click(function(event) {
console.log( $(event.target) );
if (!$(event.target).closest('#popupBox, #openPopup').length) {
$('#popupOverlay').hide();
}
});
$('body').on('click','.close, #closePopup',function(){
$('#popupOverlay').hide();
})
});
</script>
Complete Code
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Page Title</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
#popupOverlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 9999;
}
#popupBox {
background-color: #fff;
width: 400px;
max-width: 80%;
margin: 100px auto;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
.popupHeader {
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid #ccc;
padding-bottom: 10px;
margin-bottom: 10px;
}
.popupHeader h2 {
margin: 0;
}
.close {
cursor: pointer;
}
.popupBody {
padding-bottom: 20px;
}
.popupFooter {
text-align: right;
}
</style>
</head>
<body>
<button id="openPopup">Open Popup</button>
<div id="popupOverlay">
<div id="popupBox">
<div class="popupHeader">
<h2>Popup Header</h2>
<span class="close">×</span>
</div>
<div class="popupBody">
<p>This is the popup content body.</p>
<p>You can add any content here.</p>
</div>
<div class="popupFooter">
<button id="closePopup">Close</button>
</div>
</div>
</div>
<script>
$(document).ready(function() {
$('#openPopup').click(function() {
$('#popupOverlay').show();
});
$(document).click(function(event) {
console.log( $(event.target) );
if (!$(event.target).closest('#popupBox, #openPopup').length) {
$('#popupOverlay').hide();
}
});
$('body').on('click','.close, #closePopup',function(){
$('#popupOverlay').hide();
})
});
</script>
</body>
</html>
Explanation
ऊपर के example code में देख सकते है, हमने पहले document पूरा load होने के बाद में #openPopup button की id पर click event चलायी है, जिसमे #popupOverlay id element को show करा है!. उसके बाद में हमने document पे click event चलायी है और जो event चली है उस event.target के closest में हमें #popupBox, #openPopup id element नहीं मिलते है,
तो #popupOverlay id वाले element को hide करा देंगे!. वह event हमने इस लिए लिखी है अगर हमारा popup modal box open है और हमें modal box के बहार कही भी body में click करते है तो वह हमारा modal box close हो जाएंगे!.
Last में हमने .close or #closePopup click event चलायी जिससे की हम modal box को close करा सके!.
