Creating pop-ups w3-modal in Hindi
W3.CSS वेब डेवलपमेंट स्क्रिप्ट में यूजर डिफाइन स्पेफिक वेबपेज वेबसाइट पॉप-अप विंडो टेक्स्ट इनफार्मेशन को इंस्टेंट इमीडियेट वेबपेज वेबसाइट पर डिस्प्ले या शो करने में जिन्हें W3.CSS पॉप-अप मोडल के रूप में भी जाना जाता में इनका यूज़ किया जाता है। वेब डेवलपर w3-modal क्लास और इसके साथ अन्य W3.CSS और जावास्क्रिप्ट फंक्शनैलिटी को यूज़ कर एक पॉप-अप विंडो को डिस्प्ले कर सकते है. जो किसी वेबपेज या वेबसाइट में अलग-अलग टाइम इवेंट पर ऑटोमैटिक और मैन्युअल ट्रिगर हो सकता है. जैसे कि वेबपेज में किसी बटन पर क्लिक करना या वेबपेज वेब ब्राउज़र में लोड होने पर ऑटोमैटिकली इवेंट पॉप अप का ट्रिगर होना।
Below are detailed instructions on how to create and manage a pop-up modal using W3.CSS web development scripts.
The basic structure of a W3.CSS pop-up modal.
W3.CSS बेस्ड वेबपेज में w3-modal क्लास का यूज़ करके हम पॉप-अप मोडल कंटेनर को क्रिएट कर सकते है, और मौजूदा वेबपेज एलिमेंट में मोडल कंटेंट को .w3-modal-content div क्लास टैग के अंदर डिस्प्ले किया जाता है। W3.CSS में w3-modal क्लास को जावास्क्रिप्ट वेब डेवलपमेंट लैंग्वेज का यूज़ करके या स्पेशल क्लास में पॉप-अप मोडल को ऐड/ रिमूव ओपन और क्लोज करने में किया जा सकता है।
Example of a simple pop-up modal with open and close buttons in W3.CSS.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Let’s Explore Simple Pop-up Modal Attributes In W3.CSS</title>
<link rel=”stylesheet” href=”https://www.w3schools.com/w3css/4/w3.css”>
</head>
<body>
<!– here we create a trigger for open Modal Pop-up button –>
<button class=”w3-button w3-yellow w3-large” id=”testBtn”>Create Pop-up</button>
<!– Here we create the Pop-up modal –>
<div id=”testModal” class=”w3-modal”>
<div class=”w3-modal-content”>
<header class=”w3-container w3-green”>
<span class=”w3-button w3-display-topright w3-large” id=”closeBtn”>×</span>
<h2>W3.CSS Web Development Script</h2>
</header>
<div class=”w3-container w3-text-teal”>
<p>Here we create a simple Pop-up modal with W3.CSS, we can define any desire content here. </p>
</div>
<div class=”w3-container w3-text-teal”>
<p>You can display your desire Pop-up modal info here. </p>
</div>
<footer class=”w3-container w3-red”>
<button class=”w3-button w3-white” id=”closeBtnFooter”>Close Pop-up</button>
</footer>
</div>
</div>
<script>
// here we get Pop-up modal and their buttons
var modal = document.getElementById(‘testModal’);
var btn = document.getElementById(‘testBtn’);
var closeBtn = document.getElementById(‘closeBtn’);
var closeBtnFooter = document.getElementById(‘closeBtnFooter’);
// Here we open the Pop-up modal when the button is clicked by user
btn.onclick = function() {
modal.style.display = ‘block’;
}
// Here we close the Pop-up modal, when the close button is clicked by user
closeBtn.onclick = function() {
modal.style.display = ‘none’;
}
// Here we close the Pop-up modal, when the close button in the footer is clicked by user
closeBtnFooter.onclick = function() {
modal.style.display = ‘none’;
}
// Here we close the Pop-up modal, when the user clicks outside of the modal content
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = ‘none’;
}
}
</script>
</body>
</html>
Explanation of a simple pop-up modal with open and close buttons in W3.CSS.
- Trigger button – यहाँ इस एक्साम्प्ल में पॉप-अप मोडल को ट्रिगर करने के लिए एक बटन #testBtn जावास्क्रिप्ट आईडी का यूज़ किया जाता है। इंटनेट यूजर के इस बटन पर क्लिक करने पर, जावास्क्रिप्ट फंक्शन onclick इवेंट मोडल के डिस्प्ले स्टाइल को ब्लॉक पर सेट करता है, जिससे वह इसमें डिस्प्ले होता है।
- Modal structure – इसमें डिफाइन पॉप-अप मोडल आटोमेटिक अपने आप को w3-modal क्लास के साथ एक div टैग ब्लॉक में रैप करता है। पॉप-अप मोडल के अंदर, अलग-अलग ब्लॉक सेक्शन विंडो होते हैं, जिनमें मुख्य रूप से ये इन्क्लुड हैं.
- पॉप-अप मोडल में क्लोज़ बटन वाला एक हेडर ब्लॉक जिसमे टेक्स्ट ऑब्जेक्ट पोजीशनिंग के लिए w3-display-topright क्लास का यूज़ किया जाता है।
- पॉप-अप मोडल के मेन डाटा मैसेज या कंटेंट वाला एक कंटेंट एरिया डिस्प्ले होता है।
- पॉप-अप मोडल को क्लोज करने के लिए एक एक्स्ट्रा बटन वाला एक फुटर डिफाइन किया गया है।
- JavaScript – यह पॉप-अप मोडल में जावास्क्रिप्ट फंक्शन मोडल के ओपन और क्लोज टास्क को कंट्रोल करता है। जब वेब यूज़र क्लोज़ बटन (×) पर क्लिक करता है, तो इसमें मोडल का डिस्प्ले none पर सेट हो जाता है, जिससे वह स्क्रीन में हाईड हो जाता है। इसी तरह, पॉप-अप मोडल के बाहर (ओवरले पर) क्लिक करने से भी मोडल क्लोज हो जाता है।
Using modals with form elements in W3.CSS web development.
W3.CSS वेब डेवलपमेंट स्क्रिप्ट में वेब डेवलपर पॉप-अप मोडल के अंदर इंटरैक्टिव फ़ॉर्म इनपुट क्लासेज को इन्क्लुड कर सकते हैं. जिससे वेब डेवलपर अधिक इंटरैक्टिव आर्डर में यूज़र इनपुट डाटा इनफार्मेशन को कलेक्ट कर यूजर डाटा और इनफार्मेशन को अरेंज कर सकते हैं।
Example of a pop-up modal with a form in W3.CSS web development.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Let’s Explore Simple Pop-up Modal Form Attributes In W3.CSS</title>
<link rel=”stylesheet” href=”https://www.w3schools.com/w3css/4/w3.css”>
</head>
<body>
<!– here we create a trigger that open the form modal button –>
<button class=”w3-button w3-pink” id=”testBtn”>Open Form Data</button>
<!– Here we create the Pop-up modal –>
<div id=”testModal” class=”w3-modal”>
<div class=”w3-modal-content w3-card-4″>
<header class=”w3-container w3-indigo”>
<span class=”w3-button w3-display-topright w3-large” id=”closeBtn”>×</span>
<h2>Employee Contact Form:</h2>
</header>
<div class=”w3-container”>
<form action=”#”>
<label for=”name”>Employee Name: </label>
<input class=”w3-input” type=”text” id=”name” name=”name” required>
<label for=”contact”>Employee Contact: </label>
<input class=”w3-input” type=”text” id=”contact” name=”contact” required>
<div class=”w3-container w3-margin-top”>
<p>Gender:</p>
<label class=”w3-check”>
<input type=”radio” name=”gender” value=”male”>
<span class=”w3-validate”>Male</span>
</label>
<label class=”w3-check”>
<input type=”radio” name=”gender” value=”female”>
<span class=”w3-validate”>Female</span>
</label>
<label class=”w3-check”>
<input type=”radio” name=”gender” value=”other”>
<span class=”w3-validate”>other</span>
</label>
</div>
<br>
<div class=”w3-container w3-margin-top”>
<p>Department:</p>
<p>
<input class=”w3-check” type=”checkbox” id=”hr”>
<label for=”hr”>HR</label>
</p>
<p>
<input class=”w3-check” type=”checkbox” id=”marketing”>
<label for=”marketing”>Marketing</label>
</p>
<p>
<input class=”w3-check” type=”checkbox” id=”sales”>
<label for=”sales”>Sales</label>
</p>
</div>
<label for=”email”>Email:</label>
<input class=”w3-input” type=”email” id=”email” name=”email” required>
<label for=”query”>Your Query:</label>
<textarea class=”w3-input” id=”query” name=”query” required></textarea>
<br>
<button class=”w3-button w3-green w3-margin-top” type=”submit”>Upload Data </button>
</form>
</div>
<footer class=”w3-container w3-pink”>
<button class=”w3-button w3-white” id=”closeBtnFooter”>Close</button>
</footer>
</div>
</div>
<script>
// here we get Pop-up modal and their buttons
var modal = document.getElementById(‘testModal’);
var btn = document.getElementById(‘testBtn’);
var closeBtn = document.getElementById(‘closeBtn’);
var closeBtnFooter = document.getElementById(‘closeBtnFooter’);
// Here we open the Pop-up modal, when the button is clicked by user
btn.onclick = function() {
modal.style.display = ‘block’;
}
//Here we close the Pop-up modal, when the close button is clicked by user
closeBtn.onclick = function() {
modal.style.display = ‘none’;
}
// Here we close the Pop-up modal, when the close button in the footer is clicked by user
closeBtnFooter.onclick = function() {
modal.style.display = ‘none’;
}
// Here we close the Pop-up modal, when the user clicks outside of the modal content
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = ‘none’;
}
}
</script>
</body>
</html>
Explanation of a pop-up modal with a form input data in W3.CSS web development.
- यहाँ इस एक्साम्प्ल में, पॉप-अप मोडल के अंदर एक कॉन्टैक्ट फ़ॉर्म का यूज़ किया गया है। यहाँ W3.CSS पॉप-अप मोडल में एम्प्लॉई नाम, कांटेक्ट, जेंडर, डिपार्टमेंट, ईमेल, के लिए इनपुट फ़ील्ड और एम्प्लॉई क्वेरी मैसेज के लिए एक टेक्स्ट एरिया फॉर्म इनपुट एलिमेंट को डिफाइन किया गया है।
- लास्ट में फ़ॉर्म में एक सबमिट बटन (type=”Upload Data”) डिफाइन होता है, जिसका यूज़ फ़ॉर्म डाटा इन्फो को सबमिट करने में किया जा सकता है। वेब डेवलपर इसमें बैकएंड सर्विसेज को ऐड कर इस फ़ॉर्म को एक्चुअल ऑनलाइन फॉर्म डेटा सबमिशन कलेक्शन करने के लिए और भी मैन्युअल कस्टमाइज़ कर सकते हैं।
- यहाँ इसमें डिफाइन पॉप-अप मोडल को अभी भी प्रीवियस एक्साम्प्ल की तरह ही ओपन और क्लोज किया जा सकता है।
