Semantic-UI Modal Content
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 use to make your website look more amazing. It uses a class to add CSS to the elements.
Modals are 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.
Let’s have a look at the various Semantic UI modal content classes, before jumping into the modal content.
Semantic UI Modal Content:
- Header: Semantic UI Header adds a header to the modal which acts as the modal title.
- Content: Semantic UI Content adds information about the modal.
- Image content: Semantic UI Image Content adds images to the modal information which increases the modal visual appeal.
- Actions: Semantic UI Actions are used to interact with the modal.
Note: In order to create a modal, we need to apply the class modal to the desired element.
Syntax:
<div class="ui modal">
<div class="header">....</div>
<div class="content">
...
</div>
<div class="image content">
<img class="image" src="...">
...
</div>
<div class="actions">
<div class="ui approve button">...</div>
<div class="ui cancel button">...</div>
</div>
</div>
Note: Use the above syntax according to the need by using a combination of the above-mentioned classes. Refer to the examples below for a better understanding of the classes.
Example 1: In the below example we have demonstrated a modal header.
HTML
<!DOCTYPE html><html><head> <title>Semantic UI Modal Content</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 Content</h4> <hr> <br /> <div class="ui basic modal"> <div class="ui header"> A Modal Header </div> <div class="actions"> <div class="ui negative button"> I have to take a look again </div> <div class="ui positive button"> Got it </div> </div> </div> <button class="ui button" onclick="openModal()"> Click Me </button> </div> <script> const openModal = () => { $('.ui.modal').modal('setting', 'transition', 'horizontal flip').modal('show'); } </script></body></html> |
Output:
Semantic-UI Modal Content
Example 2: In the below example, we have created the content of a modal using the content class.
HTML
<!DOCTYPE html><html><head> <title>Semantic UI Modal Content</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 Content</h4> <hr> <br /> <div class="ui modal"> <div class="ui header"> A Modal Header </div> <div class="content"> <div class="ui header">Content Header</div> <p>GeeksforGeeks is Awesome</p> </div> <div class="actions"> <div class="ui negative cancel button"> I agree </div> <div class="ui positive ok button"> It's Amazing </div> </div> </div> <button class="ui button" onclick="openModal()"> Click Me </button> </div> <script> const openModal = () => { $('.ui.modal').modal('setting', 'transition', 'horizontal flip').modal('show'); } </script></body></html> |
Output:
Semantic-UI Modal Content
Example 3: In the below example, we have created an image modal content.
HTML
<!DOCTYPE html><html><head> <title>Semantic UI Modal Content</title> <link href= rel="stylesheet" /> 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 Content</h4> <hr> <br /> <div class="ui modal"> <div class="ui header"> A Modal Header </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 cancel button"> Sort of agree </div> <div class="ui positive ok button"> Agree </div> </div> </div> <button class="ui button" onclick="openModal()"> Click Me </button> </div> <script> const openModal = () => { $('.ui.modal').modal('setting', 'transition', 'horizontal flip').modal('show'); } </script></body></html> |
Output:
Semantic-UI Modal Content
Example 4: In the below example, we have demonstrated the usage of actions class.
HTML
<!DOCTYPE html><html><head> <title>Semantic UI Modal Content</title> <link href= rel="stylesheet" /> 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 Content</h4> <hr> <br /> <div class="ui modal"> <div class="ui header"> A Modal Header </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 cancel button"> Sort of agree </div> <div class="ui positive ok button"> Agree </div> </div> </div> <button class="ui button" onclick="openModal()"> Click Me </button> </div> <script> const openModal = () => { $('.ui.modal').modal('setting', 'transition', 'horizontal flip').modal('show'); } </script></body></html> |
Output:
Semantic-UI Modal Content
References: https://semantic-ui.com/modules/modal.html
Please Login to comment...