In simple words, the Modal component is a dialogue box/popup window that displayed on top of the current page, once the trigger button is clicked. It must be kept in mind that W3.CSS doesn’t support nested modals as they create a bad UI experience for the user. Therefore, only one modal window is supported at a time. W3.CSS has two model classes to create and add content in the model window. And it must be noted that we have to add a close button as the model in W3.CSS doesn’t come with one. Sr. No. Model Class Description 1. w3-modal It defines the model container. 2. w3-modal-content It defines the content of the model.
It defines the model container.
It defines the content of the model.
Follow the example below to learn how to create a model using W3.CSS:
Before launching the Modal:
After launching the Modal:
Attention reader! Don’t stop learning now. Get hold of all the important DSA concepts with the DSA Self Paced Course at a student-friendly price and become industry ready.