Semantic-UI Modal Types
Semantic UI is an open-source framework that uses CSS and jQuery to build great user interfaces. It is the same as a bootstrap for use and has great different elements to make your website look more amazing. It uses a class to add CSS to the elements.
Modal is generally used to divert the user’s attention to a part separate from the main content, as further website interactions may depend on some action that needs to be performed by the user. Semantic UI provides us with a custom-styled modal. Before getting to know the various modal types, let’s have a look at the classes that let us use the Semantic UI modals.
Semantic UI Modal Classes:
- modal: This class is used to set a standard Semantic UI Modal.
- basic: This class is used to set a basic modal accompanied by the modal class.
Syntax:
<div class="ui Modal-Classes modal">
....
</div>Example: In the below example, we have created a standard Semantic UI Modal.
HTML
<!DOCTYPE html><html><head> <title>Semantic UI Modal Types</title> <link href= rel="stylesheet" /> <script src= crossorigin="anonymous"> </script> <script src= </script></head><body style="width:100vw; height:100vh;"> <div class="ui container"> <h2 class="ui green header">GeeksforGeeks</h2> <h4>Semantic UI Modal Types</h4> <hr> <br /> <div class="ui modal"> <i class="close icon"></i> <div class="header"> Standard Modal </div> <div class="image content"> <div class="ui large image"> <img src= </div> <div class="description"> <div class="ui header">Description Header</div> <p> GeeksForGeeks is an amazing website to learn coding. </p> <p> Machine Learning, Web Development, Android Development, Data Science, you name it, it's all available on GeeksForGeeks. </p> </div> </div> <div class="actions"> <div class="ui negative button"> Sort of agree </div> <div class="ui positive button"> Agree </div> </div> </div> <button class="ui button" onclick="openModal()"> Click Me </button> </div> <script> const openModal = () => { $('.ui.modal').modal('setting', 'transition', 'scale').modal('show'); } </script></body></html> |
Output:
Semantic-UI Modal Types
Example: In the below example, we have created a basic Semantic UI Modal.
HTML
<!DOCTYPE html><html><head> <title>Semantic UI Modal Types</title> <link href= rel="stylesheet" /> <script src= crossorigin="anonymous"> </script> <script src= </script></head><body style="width:100vw; height:100vh;"> <div class="ui container"> <h2 class="ui green header">GeeksforGeeks</h2> <h4>Semantic UI Modal Types</h4> <hr> <br /> <div class="ui basic modal"> <div class="ui icon header"> <i class="smile outline icon"></i> Agree or Not? </div> <div class="content"> <p>You still don't agree that GeeksForGeeks is an amazing website?</p> </div> <div class="actions"> <div class="ui negative button"> I agree </div> <div class="ui positive button"> Of course it's awesome </div> </div> </div> <button class="ui button" onclick="openModal()"> Click Me </button> </div> <script> const openModal = () => { $('.ui.modal').modal('setting', 'transition', 'vertical flip').modal('show'); } </script></body></html> |
Output:
Semantic-UI Modal Types
References: https://semantic-ui.com/modules/modal.html
Please Login to comment...