With the advancements in visual elements in web development, several of the shelf components have become available that can readily be used to develop amazing websites. A modal is one such component. A modal or also known as a modal window is a window that appears on certain user action. A modal window is partially transparent. Usually modal has a closing button as well which when clicked closes a modal.In this article and the one after this one, we are going to study Modal. Bear in mind that a modal window can help you save lots of space on your website. A modal is used to create pop up forms, built email list or display some special offer.
There are three basic components of a Modal. A source that when interacted fires an event that opens a Modal. This source can be a button or link or whatever you want. Next thing is a div or element with class “w3-modal” this div is the container for the modal. The source is linked with this div. Inside this div there is another element or div with class “w3-modal-content” class. This class contains the actual modal content.
Now we have to devise a mechanism to connect the source that fires the event and the modal. Let’s do it with the help of an example.In the following example, we have div. The onclick event of the div executes a function which displays the modal with id “Modal1” as block level element. Similarly, the next div is the modal div with id “Modal1”. Inside the modal div, there is a cross button which when clicked closes the model window by setting its display property to none. Take a look at the following code snippet to see a modal in action.
<!doctype html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css"> </head> <body> <div class="w3-container"> <h2>W3.CSS Modal</h2> <div onclick="document.getElementById('Modal1').style.display='block'" class="w3-blue w3-xlarge">Click to open Modal</div> </div> <div id="Modal1" class="w3-modal"> <div class="w3-modal-content"> <div class="w3-container"> <span onclick="document.getElementById('Modal1').style.display='none'" class="w3-button w3-display-topright">×</span> <p>Welcome to knowledgehills.com</p> <p>Best programming tutorials on internet.</p> </div> </div> </div> </body> </html>
In the next article, we shall have a look at modal with header and footer, modal in the form of card and image modal. Keep visiting the site.