जब कभी, आपको अपने यूज़र्स को एक एरर या नोटिफिकेशन के बारे में बताने के लिए एक अलर्ट बॉक्स दिखाना होगा। ब्राउज़र द्वारा प्रदान किए गए डिफ़ॉल्ट अलर्ट बॉक्स के साथ समस्या यह है कि वे बहुत आकर्षक नहीं हैं। जब आप अपने यूज़र्स के ब्राउज़िंग अनुभव को बेहतर बनाने के लिए महान कलर संयोजन और फैंसी एनीमेशन वाली वेबसाइट बना रहे हैं, तो अनस्टाइल अलर्ट बॉक्स जगह से बाहर दिखाई देंगे।

इस ट्यूटोरियल में, आप SweetAlert2 नामक लाइब्रेरी के बारे में जानेंगे जो हमें सभी प्रकार के अलर्ट मैसेज बनाने की अनुमति देता है जिसे हमारी अपनी वेबसाइट के स्वरूप और अनुभव से मेल खाने के लिए कस्टमाइज किया जा सकता है।

सिंपल अलर्ट मैसेज डिस्प्ले करें

इससे पहले कि आप अपने यूज़र्स को उन सभी स्वीट अलर्ट मेस्सगेस को दिखा सकें, आपको लाइब्रेरी इनस्टॉल करना होगा और इसे अपनी प्रोजेक्ट में शामिल करना होगा। यदि आप npm या bower का उपयोग कर रहे हैं, तो आप निम्न कमांड्स को चलाकर इसे इंस्टॉल कर सकते हैं:

npm install sweetalert2
bower install sweetalert2

आप library के नवीनतम संस्करण के लिए एक CDN लिंक भी प्राप्त कर सकते हैं और इसे स्क्रिप्ट टैग का उपयोग करके अपने वेबपेज में शामिल कर सकते हैं:

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@7.12.15/dist/sweetalert2.all.min.js"></script>

जावास्क्रिप्ट फ़ाइल के अलावा, आपको एक CSS फ़ाइल भी लोड करनी होगी जिसका उपयोग लाइब्रेरी द्वारा बनाए गए सभी अलर्ट बॉक्स को स्टाइल करने के लिए किया जाता है:

<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/sweetalert2@7.12.15/dist/sweetalert2.min.css'>

एक बार जब आप लाइब्रेरी इनस्टॉल कर लेंगे, तो स्वीट अलर्ट बनाना वास्तव में बहुत आसान है। आपको बस इतना करना है कि swal() फ़ंक्शन को कॉल करें। बस सुनिश्चित करें कि DOM लोड होने के बाद फ़ंक्शन को कॉल किया जाए।

swal() फ़ंक्शन का उपयोग करके स्वीट अलर्ट बनाने के दो तरीके हैं। आप या तो तीन अलग-अलग आर्ग्यूमेंट्स में टाइटल, बॉडी टेक्स्ट और आइकन वैल्यू पास कर सकते हैं या आप एक ऑब्जेक्ट के रूप में एक अलग आर्ग्यूमेंट्स के साथ एक ऑब्जेक्ट के रूप में अलग-अलग वैल्यूज को अपने key-value जोड़े के रूप में पास कर सकते हैं। किसी ऑब्जेक्ट में सबकुछ पास करना उपयोगी होता है जब आप कई आर्ग्यूमेंट्स के लिए वैल्यू निर्दिष्ट करना चाहते हैं।

जब एक भी आर्गुमेंट पारित किया जाता है और यह एक स्ट्रिंग है, तो स्वीट अलर्ट केवल एक टाइटल और एक OK बटन दिखाएगा। यूजर इसे खारिज करने के लिए अलर्ट के बाहर कहीं भी या OK बटन पर क्लिक करने में सक्षम होंगे।

जब दो आर्गुमेंट पारित होते हैं, तो पहला टाइटल बन जाता है और दूसरा अलर्ट के अंदर टेक्स्ट बन जाता है। आप तीसरे आर्गुमेंट को पास करके अलर्ट बॉक्स में एक आइकन भी दिखा सकते हैं। इसमें पांच पूर्वनिर्धारित वैल्यूज में से कोई भी हो सकता है: warning, error, success, info, और question। यदि आप तीसरे आर्गुमेंट को पास नहीं करते हैं, तो अलर्ट मैसेज के अंदर कोई आइकन नहीं दिखाया जाएगा।

document.querySelector(".first").addEventListener('click', function(){
  swal("Our First Alert");
});

document.querySelector(".second").addEventListener('click', function(){
  swal("Our First Alert", "With some body text!");
});

document.querySelector(".third").addEventListener('click', function(){
  swal("Our First Alert", "With some body text and success icon!", "success");
});

अलर्ट कस्टमाइज़ करने के लिए कॉन्फ़िगरेशन ऑप्शन

यदि आप बस एक अलर्ट बॉक्स के अंदर कुछ बुनियादी इनफार्मेशन दिखाना चाहते हैं, तो पिछला उदाहरण ठीक होगा। हालांकि, लाइब्रेरी वास्तव में यूज़र्स को केवल एक अलर्ट मैसेज के अंदर कुछ टेक्स्ट दिखाने की तुलना में बहुत कुछ कर सकती है। आप अपनी खुद की जरूरतों के अनुरूप इन अलर्ट मैसेज के हर पहलू को बदल सकते हैं।

हमने पहले ही एक स्वीट अलर्ट मैसेज के अंदर टाइटल, टेक्स्ट और आइकन को कवर किया है। इसके अंदर बटन बदलने और उनके बिहेवियर को कण्ट्रोल करने का एक ऑप्शन भी है। डिफ़ॉल्ट रूप से, एक अलर्ट में टेक्स्ट के साथ केवल एक ही कन्फर्म बटन होगा जो "OK" कहता है। confirmButtonText प्रॉपर्टी की वैल्यू को सेट करके आप कन्फर्म बटन के अंदर टेक्स्ट को बदल सकते हैं। अगर आप अपने अलर्ट मैसेज में एक कैंसिल बटन भी दिखाना चाहते हैं, तो आपको केवल showCancelButton की वैल्यू को true पर सेट करना होगा। कैंसिल बटन के अंदर टेक्स्ट को cancelButtonText property का उपयोग करके बदला जा सकता है।

इन बटनों में से प्रत्येक को confirmButtonColor और cancelButtonColor प्रॉपर्टीज का उपयोग करके एक अलग बैकग्राउंड कलर दिया जा सकता है। कन्फर्म बटन के लिए डिफ़ॉल्ट color #3085d6 है, जबकि कैंसिल बटन के लिए डिफ़ॉल्ट color #aaa है। यदि आप कन्फर्म या कैंसिल बटन पर किसी भी अन्य कस्टमइजशन को लागू करना चाहते हैं, तो उनमे नयी क्लास जोड़ने के लिए आप confirmButtonClass और cancelButtonClass प्रॉपर्टीज का प्रयोग कर सकते हैं। एक बार क्लासेज जुड़ने के बाद, आप उन बटनों की उपस्थिति को बदलने के लिए CSS का उपयोग करने में सक्षम होंगे। आप customClass प्रॉपर्टी का उपयोग करके मुख्य मोडल पर भी एक क्लास जोड़ सकते हैं।

यदि आपने पहले उदाहरण में अलर्ट मैसेज से इंटरैक्ट किया है, तो आपने देखा होगा कि मॉडल्स को Enter या Escape key दबाकर बंद किया जा सकता है। इसी तरह, आप इसे डिसमिस करने के लिए मोडल के बाहर कहीं भी क्लिक कर सकते हैं। ऐसा इसलिए होता है क्योंकि allowEnterKey, allowEscapeKey, और allowOutsideClick के वैल्यू डिफ़ॉल्ट रूप से true पर सेट किया गया है।

जब आप एक मॉडल के अंदर दो अलग-अलग बटन दिखाते हैं, तो कन्फर्म बटन वह होता है जो डिफ़ॉल्ट रूप से फ़ोकस में होता है। आप कन्फर्म बटन से फोकस को हटा सकते हैं इसके लिए focusConfirm की वैल्यू को false पर सेट करें। इसी तरह, आप focusCancel की वैल्यू को true पर सेट करके कैंसिल बटन पर फ़ोकस भी सेट कर सकते हैं।

कन्फर्म बटन हमेशा बाईं ओर दिखाया जाता है। आपके पास reverseButtons की वैल्यू को true पर सेट करके कन्फर्म और कैंसिल बटन की पोजीशन को रिवर्स करने ऑप्शन है।

अलर्ट मैसेज के अंदर बटन की पोजीशन और कलर बदलने के अलावा, आप अलर्ट मैसेज की बैकग्राउंड और पोजीशन या उसके आस-पास की बैकग्राउंड भी बदल सकते हैं। इतना ही नहीं, लेकिन लाइब्रेरी आपको अलर्ट मैसेज में अपने स्वयं के कस्टम आइकन या इमेजेज दिखाने की अनुमति देती है। यह कई सिचुएशन में सहायक हो सकता है।

आप backdrop प्रॉपर्टी का उपयोग करके स्वीट अलर्ट के बैकग्राउंड को कस्टमाइज़ कर सकते हैं। यह प्रॉपर्टी या तो एक बूलियन या स्ट्रिंग को इसके वैल्यू के रूप में स्वीकार करती है। डिफ़ॉल्ट रूप से, एक अलर्ट मैसेज की बैकग्राउंड में ज्यादातर ट्रांसपेरेंट ग्रे कलर होते हैं। आप backdrop की वैल्यू को false पर सेट करके इसे पूरी तरह छुपा सकते हैं। इसी तरह, आप स्ट्रिंग के रूप में backdrop वैल्यू सेट करके बैकग्राउंड में अपनी इमेजेज भी दिखा सकते हैं। ऐसे मामलों में, backdrop स्ट्रिंग की पूरी वैल्यू को CSS background प्रॉपर्टी को सौंपा गया है। एक स्वीट अलर्ट मैसेज की बैकग्राउंड background प्रॉपर्टी का उपयोग कर नियंत्रित किया जा सकता है। डिफ़ॉल्ट रूप से सभी अलर्ट मैसेज में पूरी तरह से सफेद बैकग्राउंड होता है।

डिफ़ॉल्ट रूप से विंडो के केंद्र में सभी अलर्ट मैसेज पॉप अप होते हैं। हालांकि, आप position प्रॉपर्टी का उपयोग कर उन्हें एक अलग स्थान से पॉप अप कर सकते हैं। इस प्रॉपर्टी में सेल्फ-एक्सप्लनेटोरी नामों के साथ नौ अलग-अलग वैल्यूज हो सकती हैं: top, top-start, top-end, center, center-start, center-end, bottom, bottom-start, और bottom-end।

जब आप animation प्रॉपर्टी की वैल्यू को false पर सेट करके एक मॉडल पॉप अप करते हैं तो आप एनीमेशन को डिसएबल कर सकते हैं। लाइब्रेरी एक timer प्रॉपर्टी भी प्रदान करती है जिसका उपयोग टाइमर को स्वत: बंद करने के लिए किया जा सकता है जब एक बार मिलीसेकंड विशिष्ट संख्या पार कर लेती है।

निम्नलिखित उदाहरण में, मैंने चार अलग-अलग अलर्ट मैसेज को बनाने के लिए इस सेक्शन में चर्चा की गई सभी प्रॉपर्टीज के विभिन्न कॉम्बिनेशन का उपयोग किया है। यह डिस्प्ले करना चाहिए कि आप SweetAlert2 लाइब्रेरी द्वारा बनाए गए मोडल की अपीयरेंस और बिहेवियर को पूरी तरह से कैसे बदल सकते हैं।

document.querySelector(".first").addEventListener("click", function() {
  swal({
    title: "Show Two Buttons Inside the Alert",
    showCancelButton: true,
    confirmButtonText: "Confirm",
    confirmButtonColor: "#00ff99",
    cancelButtonColor: "#ff0099"
  });
});

document.querySelector(".second").addEventListener("click", function() {
  swal({
    title: "Are you sure about deleting this file?",
    type: "info",
    showCancelButton: true,
    confirmButtonText: "Delete It",
    confirmButtonColor: "#ff0055",
    cancelButtonColor: "#999999",
    reverseButtons: true,
    focusConfirm: false,
    focusCancel: true
  });
});

document.querySelector(".third").addEventListener("click", function() {
  swal({
    title: "Profile Picture",
    text: "Do you want to make the above image your profile picture?",
    imageUrl: "https://images3.imgbox.com/4f/e6/wOhuryw6_o.jpg",
    imageWidth: 550,
    imageHeight: 225,
    imageAlt: "Eagle Image",
    showCancelButton: true,
    confirmButtonText: "Yes",
    cancelButtonText: "No",
    confirmButtonColor: "#00ff55",
    cancelButtonColor: "#999999",
    reverseButtons: true,
  });
});

document.querySelector(".fourth").addEventListener("click", function() {
  swal({
    title: "Alert Set on Timer",
    text: "This alert will disappear after 3 seconds.",
    position: "bottom",
    backdrop: "linear-gradient(yellow, orange)",
    background: "white",
    allowOutsideClick: false,
    allowEscapeKey: false,
    allowEnterKey: false,
    showConfirmButton: false,
    showCancelButton: false,
    timer: 3000
  });
});

महत्वपूर्ण SweetAlert2 के मेथड्स

यूज़र्स को दिखाने के लिए विभिन्न स्वीट अलर्ट मैसेज को शुरू करना एक बात है, लेकिन कभी-कभी आपको उन मेथड्स तक पहुंच की भी आवश्यकता होगी जो शुरुआत के बाद उन अलर्ट मेस्सगेस के बिहेवियर को नियंत्रित करते हैं। सौभाग्य से, SweetAlert2 लाइब्रेरी कई मेथड्स को प्रदान करती है जिनका उपयोग मोडल को दिखाने या छिपाने के साथ-साथ इसका टाइटल, टेक्स्ट, इमेज इत्यादि प्राप्त करने के लिए भी किया जा सकता है।

आप यह जांच सकते हैं कि isVisible() मेथड का उपयोग कर एक मॉडल विज़िबल या हिडन है या नहीं। आप close() या closeModal() मेथड्स का उपयोग करके प्रोग्रामेटिक रूप से एक खुले मोडल को बंद भी कर सकते हैं। यदि आप प्रारंभिकरण के दौरान मल्टीप्ल अलर्ट मैसेज के लिए प्रॉपर्टीज के एक ही सेट का उपयोग करना चाहते हैं, तो आप शुरुआत में setDefaults({configurationObject}) मेथड को केवल उन सभी प्रॉपर्टीज की वैल्यू को सेट करने के लिए कॉल कर सकते हैं। लाइब्रेरी सभी प्रॉपर्टीज को उनके डिफ़ॉल्ट वैल्यूज को रीसेट करने के लिए resetDefaults() मेथड भी प्रदान करती है।

आप getTitle(), getContent(), और getImage() मेथड्स का उपयोग करके एक मोडल का टाइटल, कंटेंट और इमेज प्राप्त कर सकते हैं। इसी तरह, आप HTML भी प्राप्त कर सकते हैं जो getConfirmButton() और getCancelButton() मेथड्स का उपयोग करके कन्फर्म और कैंसिल बटन बनाता है।

ऐसी कई अन्य मेथड्स हैं जिनका उपयोग अन्य टास्क्स को करने के लिए किया जा सकता है जैसे प्रोग्राम्सेटिक रूप से कन्फर्म या कैंसिल बटन पर क्लिक करना।

अंतिम विचार

SweetAlert2 लाइब्रेरी डेवलपर्स के लिए कुछ प्रॉपर्टीज की वैल्यूज को सेट करके अपने यूज़र्स को दिखाने के लिए कस्टम अलर्ट मैसेज बनाना बहुत आसान बनाता है। इस ट्यूटोरियल का उद्देश्य इस लाइब्रेरी की मूलभूत बातों को कवर करना था ताकि आप अपने स्वयं के कस्टम अलर्ट मैसेज को जल्दी से बना सकें।

पोस्ट को बहुत बड़ा होने से रोकने के लिए, मैंने केवल सबसे अधिक उपयोग किए जाने वाले मेथड्स और प्रॉपर्टीज को कवर किया है। यदि आप उन सभी अन्य मेथड्स और प्रॉपर्टीज के बारे में पढ़ना चाहते हैं जिनका उपयोग एडवांस्ड अलर्ट मैसेज को बनाने के लिए किया जा सकता है, तो आपको लाइब्रेरी के विस्तृत डॉक्यूमेंटेशन के माध्यम से जाना चाहिए।

Envato Market में उपलब्ध अन्य जावास्क्रिप्ट रिसोर्सेज को भी देखना न भूलें।

अगर आप इस टुटोरिअल में किसी चीज का स्पष्टीकरण लेना चाहते हैं तो मुझे बताने में संकोच न करें।