Project - Modal Popup

மாதிரி பாப்-அப்

ஒரு மாதிரி என்பது பக்கத்தின் மேல் தோன்றும் ஒரு பாப்-அப் சாளரமாகும்.

இந்த திட்டம் மூன்று வழிகளில் மூடக்கூடிய ஒரு மாதிரியை உருவாக்கும்:

மூடு பொத்தானைக் கிளிக் செய்யவும் (x)

மாதிரிக்கு வெளியே கிளிக் செய்யவும்

Escape விசையை அழுத்தவும்

நீங்கள் கற்றுக் கொள்வீர்கள்

உறுப்புகளைக் காட்டுதல் மற்றும் மறைத்தல்

உறுப்புகளை எவ்வாறு காட்டுவது மற்றும் மறைப்பது

JavaScript உடன் CSS வகுப்புகளைப் பயன்படுத்துதல்

JavaScript உடன் CSS வகுப்புகளை எவ்வாறு பயன்படுத்துவது

கிளிக் மற்றும் keydown நிகழ்வுகளைக் கையாளுதல்

கிளிக் மற்றும் keydown நிகழ்வுகளை எவ்வாறு கையாளுவது

உறுப்புக்கு வெளியே கிளிக்களைக் கண்டறிதல்

உறுப்புக்கு வெளியே கிளிக்களை எவ்வாறு கண்டறிவது

முதலில்: 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; }

⚙️ குறிப்பு:

JavaScript show வகுப்பைச் சேர்த்து நீக்கும்.

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

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

பின்னர்: JavaScript உருவாக்குதல்

எடுத்துக்காட்டு

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();
  }
});

JavaScript விளக்கம்

திறந்த பொத்தானை openModal() செயல்பாட்டுடன் இணைக்கவும்

மூடு பொத்தானை closeModal() செயல்பாட்டுடன் இணைக்கவும்

மாதிரிக்கு வெளியே கிளிக் செய்வதை closeModal() செயல்பாட்டுடன் இணைக்கவும்

Escape விசையை closeModal() செயல்பாட்டுடன் இணைக்கவும்

செயல்பாடுகளை பொத்தான்களுடன் இணைத்தல்

திறந்த பொத்தானை openModal() செயல்பாட்டுடன் addEventListener() உடன் இணைக்கவும்.

மூடு பொத்தானை closeModal() செயல்பாட்டுடன் addEventListener() உடன் இணைக்கவும்.

எடுத்துக்காட்டு

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 மாதிரி மறைக்கப்பட்டிருக்கும் போது கூட மூடுகிறது:

இது சரி, ஆனால் அது திறந்திருக்கும் போது மட்டும் மூடுவதற்கு ஒரு சோதனையைச் சேர்க்கலாம்.

⚠️ அனிமேஷனுடன் display: none ஐப் பயன்படுத்துதல்:

ஃபேட் விளைவுகளை விரும்பினால், opacity ஐப் பயன்படுத்தவும் (போனஸ் சவால்).

போனஸ் சவால்கள் (நிலை உயர்த்தல்)

CSS பயன்படுத்தி ஃபேட்-இன் / ஃபேட்-அவுட் விளைவைச் சேர்க்கவும்

மெதுவாகத் தோன்றி மறையும் விளைவு

மாதிரி திறக்கும் போது கவனத்தை மாதிரிக்கு நகர்த்தவும் (அணுகல்)

அணுகலுக்கான கவன மேலாண்மை

கவனத்தை மாதிரிக்குள் சிக்கவைக்கவும் (மேம்பட்ட)

மேம்பட்ட கவன மேலாண்மை

ஒரு பொத்தான் கவனம் செலுத்தும் போது Enter விசையுடன் மாதிரியை மூடவும்

கூடுதல் விசைக் கட்டுப்பாடு

JavaScript திட்டங்கள்

JavaScript Counter

localStorage இல் மீட்டெடுத்து சேமிக்கும் எண்ணிக்கை திட்டம்.

JavaScript Event Listener

onclick க்கு பதிலாக event listener ஐப் பயன்படுத்தும் எண்ணிக்கை திட்டம்.

JavaScript To-Do List

local storage இல் உள்ள ஒரு வரிசையில் சேமிக்கப்பட்ட செய்ய வேண்டிய பட்டியல்.

JavaScript Modal Popup

பக்கத்தின் மேல் தோன்றும் மாதிரி பாப்-அப் சாளரம்.