Project - Modal Popup

নমুনা পপ আপ

একটি মডেল হল একটি পপ-আপ উইন্ডো যা পৃষ্ঠার শীর্ষে প্রদর্শিত হয়।

এই প্রোগ্রামটি একটি মডেল তৈরি করে যা তিনটি উপায়ে বন্ধ করা যেতে পারে:

ক্লোজ বোতামে ক্লিক করুন (x)

মডেলের বাইরে ক্লিক করুন

Escape কী টিপুন

তুমি শিখবে

দেখানো এবং লুকানো উপাদান

কিভাবে উপাদান প্রদর্শন এবং লুকান

জাভাস্ক্রিপ্ট সহ CSS ক্লাস ব্যবহার করা

কিভাবে JavaScript দিয়ে CSS ক্লাস ব্যবহার করবেন

ক্লিক এবং কীডাউন ইভেন্টগুলি পরিচালনা করা

ক্লিক এবং কীডাউন ইভেন্টগুলি কীভাবে পরিচালনা করবেন

উপাদানের বাইরে ক্লিক সনাক্ত করা হচ্ছে

উপাদানের বাইরের ক্লিকগুলি কীভাবে সনাক্ত করবেন

প্রথম: HTML তৈরি করা

প্রথমে HTML পেজ তৈরি করুন

id="openBtn" সহ একটি বোতাম যোগ করুন।

নমুনা গঠন যোগ করুন:

class="modal-overlay" এর সাথে একটি div যোগ করুন।

class="modal-box" এর সাথে একটি div যোগ করুন।

id="closeBtn" এবং class="modal-close" সহ একটি বোতাম যোগ করুন।

উদাহরণ

<!DOCTYPE html>
<html>

<style>
/* CSS will go here */
</style>

<body>
<h2>Modal Popup</h2>

<button id="openBtn">Open Modal</button>

<div id="modal" class="modal-overlay">
  <div class="modal-box">
    <button id="closeBtn" class="modal-close">×</button>
    <h3>Hello!</h3>
    <p>This is a modal popup.</p>
  </div>
</div>

<script>
// JavaScript will go here
</script>

</body>
</html>

📌দ্রষ্টব্য:

মডেলটির দুটি অংশ রয়েছে:

ওভারলে (পটভূমি)
নমুনা বাক্স (বিষয়বস্তু)

তারপর: CSS তৈরি করা

উদাহরণ

<style>
/* The overlay (background) */
.modal-overlay {
  display: none;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
}

/* Show the modal */
.modal-overlay.show {
  display: block;
}

/* The modal box */
.modal-box {
  background: white;
  width: 90%;
  max-width: 400px;
  margin: 100px auto;
  padding: 20px;
  border-radius: 10px;
  position: relative;
}

/* Close button */
.modal-close {
  position: absolute;
  right: 12px;
  top: 8px;
  font-size: 24px;
  border: none;
  background: none;
  cursor: pointer;
}
</style>

CSS বিবরণ

ডিফল্টরূপে মডেল লুকান:

.modal-overlay { display: none; }

একটি ক্লাস ব্যবহার করে মডেল দেখান:

.modal-overlay.show { display: block; }

⚙️দ্রষ্টব্য:

জাভাস্ক্রিপ্ট শো ক্লাস যোগ করে এবং মুছে দেয়।

function openModal() {
  modal.classList.add("show");
}

function closeModal() {
  modal.classList.remove("show");
}

তারপর: জাভাস্ক্রিপ্ট তৈরি করা

উদাহরণ

const modal = document.getElementById("modal");
const openBtn = document.getElementById("openBtn");
const closeBtn = document.getElementById("closeBtn");

function openModal() {
  modal.classList.add("show");
}

function closeModal() {
  modal.classList.remove("show");
}

openBtn.addEventListener("click", openModal);
closeBtn.addEventListener("click", closeModal);

/* Close when clicking outside the modal box */
modal.addEventListener("click", function (event) {
  if (event.target === modal) {
    closeModal();
  }
});

/* Close when pressing Escape */
document.addEventListener("keydown", function (event) {
  if (event.key === "Escape") {
    closeModal();
  }
});

জাভাস্ক্রিপ্ট বিবরণ

openModal() ফাংশনে ওপেন বোতামটি বাঁধুন

CloseModal() ফাংশনে ক্লোজ বোতামটি আবদ্ধ করুন

ক্লোজমোডাল() ফাংশনে মোডালের বাইরে ক্লিক করে সংযোগ করুন

CloseModal() ফাংশনে Escape কী বাঁধুন

বোতামের সাথে ফাংশন সংযুক্ত করা

addEventListener() দিয়ে openModal() ফাংশনে ওপেন বোতামটি সংযুক্ত করুন।

AddEventListener() দিয়ে closeModal() ফাংশনে ক্লোজ বোতামটি সংযুক্ত করুন।

উদাহরণ

openBtn.addEventListener("click", openModal);
closeBtn.addEventListener("click", closeModal);

একটি ক্রিয়াকলাপের সাথে একটি ক্লিক-আউট যুক্ত করা

ওভারলেতে ক্লিকটি ঘটেছে কিনা তা পরীক্ষা করুন। closeModal() এর সাথে এটি একত্রিত করুন:

উদাহরণ

modal.addEventListener("click", function (event) {
  if (event.target === modal) {
    closeModal();
  }
});

🎯দ্রষ্টব্য:

event.target === modal :

ব্যবহারকারী ওভারলে ক্লিক করেছেন, নমুনা বাক্সের ভিতরে নয়।

একটি ফাংশনে Escape কী বাঁধাই

"Escape" কীস্ট্রোক শুনুন। closeModal() এর সাথে এটি একত্রিত করুন:

উদাহরণ

document.addEventListener("keydown", function (event) {
  if (event.key === "Escape") {
    closeModal();
  }
});

সাধারণ ভুল

⚠️ক্লিক করার সময় মডেলটি কখনই বন্ধ হয় না:

event.target === modal .

⚠️মডেল লুকানো অবস্থায়ও Escape বন্ধ হয়:

এটি ঠিক আছে, কিন্তু আমরা একটি পরীক্ষা যোগ করতে পারি শুধুমাত্র যখন এটি খোলা থাকে তখনই বন্ধ করতে পারি।

⚠️ডিসপ্লে ব্যবহার করে: অ্যানিমেশনের সাথে নেই:

আপনি যদি বিবর্ণ প্রভাব চান, অস্বচ্ছতা (বোনাস চ্যালেঞ্জ) ব্যবহার করুন।

বোনাস চ্যালেঞ্জ (লেভেল আপ)

CSS ব্যবহার করে ফেইড-ইন/ফেড-আউট ইফেক্ট যোগ করুন

একটি ধীর বিবর্ণ প্রভাব

মডেল খুললে ফোকাসকে মডেলে নিয়ে যান (অ্যাক্সেস)

অ্যাক্সেসযোগ্যতার জন্য মনোযোগ ব্যবস্থাপনা

মডেলের মধ্যে ফোকাস আটকান (উন্নত)

উন্নত মনোযোগ ব্যবস্থাপনা

একটি বোতামে ফোকাস থাকলে এন্টার কী দিয়ে মডেলটি বন্ধ করুন

অতিরিক্ত কী নিয়ন্ত্রণ

জাভাস্ক্রিপ্ট প্রকল্প

JavaScript Counter

একটি গণনা স্কিম যা স্থানীয় স্টোরেজে পুনরুদ্ধার এবং সঞ্চয় করে।

JavaScript Event Listener

একটি গণনা প্রোগ্রাম যা অনক্লিকের পরিবর্তে একটি ইভেন্ট লিসেনার ব্যবহার করে।

JavaScript To-Do List

স্থানীয় স্টোরেজে একটি অ্যারেতে সংরক্ষিত একটি করণীয় তালিকা।

JavaScript Modal Popup

পৃষ্ঠার শীর্ষে একটি নমুনা পপ-আপ উইন্ডো প্রদর্শিত হবে৷

পূর্ববর্তী পরবর্তী