How to create popup model in html css and Javascript

অনেকেই নিজের ওয়েবসাইটের বিভিন্ন অংশ হাইলাইট করতে পপআপ মডেল ব্যবহার করে। আপনিও যদি আপনার ওয়েবসাইটে পপআপ মডেল যুক্ত করতে চান তবে আপনাকে অবশ্যই HTML CSS ও JavaScript জানতে হবে।

আপনি যদি এগুলো না জানেন তবে আপনি পপআপ মডেল তৈরি করতে পারবেন না।

তবে আপনি যদি সদ্য ওয়েব ডিজাইনিং শিখা শুরু করে থাকেন তবে আজকের আমার এই পোস্ট আপনার জন্য খুবই উপকারি হবে। কারন আজকে আমি আপনাদের দেখাবো কীভাবে html csa javascript দিয়ে একটি পপআপ মডেল বক্স তৈরি করা যায়।

তবে বিষয়টি সম্পূর্ণ জানার জন্য আজকের পোস্টটা মনোযোগ দিয়ে পড়তে থাকুন আর সোর্সকোডগুলো কপি করে নিজে নিজে কোড তৈরি করার চেষ্টা করুন।

পপআপ মডেল বক্স তৈরি করতে প্রথমেই আমাদের তিনটি ফাইল তৈরি করতে হবে।

Required Files

index.html: নামে একটা html ফাইল তৈরি করতে হবে। এটাই হবে আমাদের মূল কাঠামো।
style.css: এই ফাইলটা তৈরি করতে হবে উপরের তৈরিকৃত html ফাইলটাকে সাজানোর জন্য।
script.js: এই ফাইলটাকে তৈরি করতে হবে উপরের সবগুলো কোডকে ডাইনামিকভাবে হ্যান্ডেল করার জন্য।

Source Code

নিচে html css javascript কোডগুলো দিচ্ছি যেগুলো আপনারা কপি করে নিয়ে কোড এডিটরে ভালো করে প্র্যাক্টিস করতে পারবেন।

উপরের কোডগুলো একদম সহজভাবে লেখা হয়েছে যা আপনি একবার প্র্যাক্টিস করলে পরে নিজে নিজে পপআপ মডেল তৈরি করতে পারবেন।

HTML Code

নিচে html কোডগুলো দেওয়া হবে কপি বাটনে ক্লিক করে কোডগুলো কপি করে নেন। কপি করার পর আপনার তৈরিকৃত index.html ফাইলে কোডগুলো পেস্ট করে দেন।

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Popup Model</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <button class="open-btn">Open Model</button>
  <div class="open-model">
    <div class="model-header">
      <div class="logo">Md Rakib</div>
      <div class="close">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <line x1="18" y1="6" x2="6" y2="18"></line>
          <line x1="6" y1="6" x2="18" y2="18"></line>
        </svg>
      </div>
    </div>
    <div class="model-content">
      <ul>
        <li><a href="#">About Us</a></li>
        <li><a href="#">Contact Us</a></li>
        <li><a href="#">Terms and Conditions</a></li>
        <li><a href="#">Privacy Policy</a></li>
        <li><a href="#">Sitemap</a></li>
      </ul>
    </div>
  </div>
  <div class="model-overlay"></div>
  <script src="script.js"></script>
</body>
</html>

CSS Code

নিচে থেকে css কোডগুলো কপি করে নিয়ে style.css ফাইলে পেস্ট করে দেন। এই css কোডগুলো মডেল বক্সকে সাজানোর জন্য। আপনি উচ্ছা করলে নিজের মতো করে স্টাইল করতে পারেন।

* {
	box-sizing: border-box;
}
@font-face {
	font-family: 'Nunito';
	src: url('https://mdrakibbd.pages.dev/fonts/Nunito-latin-400.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
}
body {
	background: #fff;
	color: #111111;
	display: flex;
	justify-content: center;
	align-items: center;
	font-family: 'Nunito', sans-serif;
}
.open-btn {
	padding: 6px 15px;
	background: #1976d6;
	color: #fff;
	text-align: center;
	border: none;
	border-radius: 50px;
}
.open-btn:hover {
	background: #111111;
}
.open-model {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: #fff;
	border: 1px solid #ebebeb;
	width: 90%;
	max-width: 300px;
	border-radius: 10px;
	z-index: 9999;
	display: none;
}
.model-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 8px 15px;
	border-bottom: 1px solid #ebebeb;
}
.model-header .logo {
	font-size: 20px;
	font-weight: bolder;
}
.model-content ul {
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 16px;
}
.model-content ul li {
	padding: 8px 15px;
	/*border-radius: 5px;*/
	border-bottom: 1px solid #ebebeb;
}
.model-content ul li a {
	text-decoration: none;
	color: #111111;
	display: block;
	cursor: default;
}
.model-content ul li:last-child {
	border-bottom: none;
	border-radius: 0px 0px 10px 10px;
}
.model-content ul li:hover {
	background: #f4f4f4;
}
.model-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.3);
	backdrop-filter: blur(3px);
	z-index: 998;
	display: none;
}

JavaScript Code

নিচের কোডগুলো হলো জাভাস্ক্রিপ্ট কোড যেগুলোকে script.js ফাইলে পেস্ট করে দিবেন। পপআপ মডেল তৈরি করার জন্য জাভাস্ক্রিপ্ট কোড অপরিহার্য।

তাই ভুলভাবে জাভাস্ক্রিপ্ট কোড লিখরে পপআপ মডেল বক্স কাজ করবে না।

let clickBtn = document.querySelector(".open-btn")
let openModel = document.querySelector(".open-model")
let overlay = document.querySelector(".model-overlay")
let closeBtn = document.querySelector(".model-header > .close")
clickBtn.addEventListener("click", () => {
	openModel.style.display = "block"
	overlay.style.display = "block"
})
overlay.addEventListener("click", () => {
	openModel.style.display = "none"
	overlay.style.display = "none"
})
closeBtn.addEventListener("click", () => {
	openModel.style.display = "none"
	overlay.style.display = "none"
})

উপরের সবগুলো কোড নেওয়ার পর index.html ফাইলটাকে ব্রাউজ করেন দেখবেন আপনার কাঙ্ক্ষিত পপআপ মডেল তৈরি হয়ে গেছে।