Creating pop-ups w3-modal
W3.CSS web development scripts use user-defined pop-up windows, also known as W3.CSS pop-up modals, to display text information instantly on a webpage or website. Web developers can use the w3-modal class along with other W3.CSS and JavaScript functionality to display a pop-up window that can be triggered automatically or manually by various timed events on a webpage or website, such as clicking a button on a webpage or automatically triggering a pop-up event when the webpage is loaded in a web browser.
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.
Using the w3-modal class in a W3.CSS-based webpage, we can create a pop-up modal container, and the modal content is displayed within the existing webpage element, inside a .w3-modal-content div class tag. The w3-modal class in W3.CSS can be used to add/remove, open, and close pop-up modals using the JavaScript web development language or a special class.
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 – In this example, a button with the JavaScript ID #testBtn is used to trigger the pop-up modal. When an internet user clicks this button, the JavaScript function onclick event sets the modal’s display style to block, causing it to display in it.
- Modal structure – The pop-up modal defined here automatically wraps itself in a div tag block with the w3-modal class. Within the pop-up modal, there are separate block section windows, primarily these:
- The pop-up modal contains a header block with a close button, which uses the w3-display-topright class for text object positioning.
- A content area containing the pop-up modal’s main data message or content is displayed.
- A footer with an additional button to close the pop-up modal is defined.
- JavaScript – This JavaScript function in a pop-up modal controls the modal’s open and close actions. When a web user clicks the close button (×), the modal’s display is set to none, hiding it from the screen. Similarly, clicking outside the pop-up modal (on the overlay) also closes the modal.
Using modals with form elements in W3.CSS web development.
With W3.CSS web development scripts, web developers can include interactive form input classes within pop-up modals. This allows web developers to collect user input data and arrange user data and information in a more interactive order.
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 form input data in W3.CSS web development.
- In this example, a contact form is used within a pop-up modal. The W3.CSS pop-up modal defines form input elements with input fields for employee name, contact, gender, department, and email, and a text area for the employee query message.
- Finally, the form defines a submit button (type=”Upload Data”), which can be used to submit form data. Web developers can further customize this form by adding backend services to allow for the collection of form data submissions online.
- The pop-up modal defined here can still be opened and closed in the same way as in the previous example.
