ভ্যানিলা JavaScript দিয়ে মডাল উইন্ডো বা যেকোনো UI এলিমেন্ট আউটসাইড ক্লিক করলে কীভাবে বন্ধ করবেন তা শিখুন।
মডাল পপআপ সাধারণত বিরক্তিকর, বিশেষ করে যখন সেটি পুরো স্ক্রিন কভার করে। এটি আরও বিরক্তিকর হয়ে ওঠে যখন ওয়েবসাইটে ঢুকার পয়ลา সেকেন্ডের মধ্যে সেটি আসে। এটি বোকামি, এবং খারাপ UX ডিজাইন।
কিছু ওয়েবসাইট এক ধাপ এগিয়ে যেতে চায় এবং ক্লোজ মডাল (X) বাটনটা এমন ছোট এবং অদ্ভুত পজিশনে রাখে যে আপনার চেপে কয়েক সেকেন্ড পাজল солভ করতে হয়, এবং আপনি কেন ওয়েবসাইটে এসেছিলেন সেটি ভুলে যেতে পারেন।
আমরা এটিকে ঠিক করব।
HTML: একটি সিম্পল মডাল উইন্ডো
আপনার HTML ডকুমেন্টে নিচের কোডটি যোগ করুন:
<main> <div class="modal"> <button class="button-close-modal">X</button> <h2>Subscribe to my Newsletter</h2> <p>Get access to exclusive content that only share with my email list</p> <label for="email">Enter your email:</label> <input type="email" id="email" name="email" /> </div> </main>CSS: সিম্পল মডাল এবং বাটন স্টাইলিং
.modal { padding: 2rem; border: 1px solid #eee; width: max-content; position: fixed; right: 0; bottom: 0; max-width: 100%; } .button-close-modal { display: block; font-size: 2rem; font-weight: bold; margin-left: auto; }JavaScript: ডকুমেন্টে সব ক্লিক ডিটেক্ট করুন
নিচের JavaScript কোডটি মডাল উইন্ডো বন্ধ করবে যদি ইউজার মডাল এলিমেন্টের বাইরে ক্লিক করে, অথবা X বাটনে ক্লিক করে:
document.addEventListener( "click", function(event) { // যদি ইউজার X বাটনে ক্লিক করে অথবা মডাল উইন্ডোর বাইরে ক্লিক করে, তবে closeModal() কল করে মডাল বন্ধ করুন if ( event.target.matches(".button-close-modal") || !event.target.closest(".modal") ) { closeModal() } }, false ) function closeModal() { document.querySelector(".modal").style.display = "none" }সকল কোড এখানে পান।
কোডে কী হচ্ছে:
- প্রথমে, আমরা
documentঅবজেক্টে একটি ক্লিক ইভেন্ট লিসেনার সেট আপ করি। এর মানে HTML ডকুমেন্টের যেকোনো জায়গায় ক্লিক করলে সেটি রেজিস্টার হবে, এবং এখন আমরা কার্লি ব্রেস{ .. }এর ভিতরে ফাংশন রান করতে পারি। - তারপর মডাল উইন্ডো বন্ধ করার দুটি টার্গেট/উপায় সেট আপ করি: বাটন ক্লিক বা মডাল উইন্ডোর বাইরে ক্লিক।
- if স্টেটমেন্ট-এ আমরা বলি "যদি টার্গেট বাটনটি ম্যাচ করে (
matches(".button-close-modal")) অথবা (||) টার্গেট মডাল উইন্ডোতে হয় না!event.target.closest(".modal"), তবেcloseModal()ফাংশন কল করুন।" - যখন
closeModal()ফাংশন কল হয়, এটি.modalক্লাস সিলেক্টরটি সিলেক্ট করে এবংdisplay = 'none'দিয়ে লুকিয়ে দেয়।
closest() মেথডটি একটি এলিমেন্টের নিকটতম ম্যাচিং পেরেন্ট খুঁজে বের করে যেটিতে আপনার দেওয়া সিলেক্টর থাকে, এই কেসে আমরা একটি ক্লাস সিলেক্টর (.modal) পাস করেছি।
matches() মেথডটি চেক করে যে ইভেন্ট.টার্গেট একটি নির্দিষ্ট সিলেক্টর ম্যাচ করে কিনা, এই কেসে সেটি ক্লোজ বাটন ক্লাস সিলেক্টর .button-close-modal।
