Semantic UI is an open-source framework that has some predefined classes to make our website look beautiful and responsive. It is similar to bootstrap as it has pre-defined classes for use. It used CSS and jQuery to build the interface. It has some different types of elements that help us to create a beautiful website.
Semantic-UI Modal is used to display the content on the screen that can temporarily block interaction with the main content. We can have any type of content inside the modal. In this article, we will discuss Modal in Semantic-UI.
- Semantic-UI Modal Types: We have two types of modal in Semantic UI Modal, one in Modal and the other one in Basic Modal.
- Semantic-UI Modal Content: There are four types of modal content Header, text content or you can say content, Image Content, and action content.
- Semantic-UI Modal Variations: Semantic UI Modal offers us three variants of modal Full Screen modal, different sized modal, and Scrolling content modal.
- Semantic-UI Modal States: There are only one state in odal that is an active state.
<div class="ui modal"> ... </div>
Example 1: The following code demonstrates the Semantic-UI Modal Types.
Example 2: The following code demonstrates the Semantic-UI Modal Content.
Example 3: The following code demonstrates the Semantic-UI Modal Variations.
Example 4: The following code demonstrates the Semantic-UI Modal States.
Please Login to comment...