semantic-ui
  1. semantic-ui-modal
PreviousNext

Semantic UI Modal

Semantic UI Modal is a component used to create a popup window that displays content on a web page. It can be used to display additional content, gather user input, or provide important information to the user.

Syntax

<div class="ui modal">
  <div class="header">Modal Title</div>
  <div class="content">
    <p>Modal content goes here.</p>
  </div>
  <div class="actions">
    <div class="ui button">Cancel</div>
    <div class="ui primary button">Ok</div>
  </div>
</div>

The above is the basic syntax used for creating a Semantic UI Modal. The class modal is used to indicate that the content within the div should be displayed as a modal.

Use

The Semantic UI Modal is best used when you want to grab the user's attention or display important information. You can use it to show error messages, confirmation messages, and other relevant content on the page.

Importance

Semantic UI Modal is important in web development because it makes it easy to display content in a popup window. This can help to improve the user experience by providing relevant information without interrupting the flow of the page.

Example

An example of how to use Semantic UI Modal can be seen in the following code snippet:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" />
</head>
<body>
  <div class="ui button" id="modalButton">Open Modal</div>

  <div class="ui modal">
    <div class="header">Modal Title</div>
    <div class="content">
      <p>Modal content goes here.</p>
    </div>
    <div class="actions">
      <div class="ui button">Cancel</div>
      <div class="ui primary button">Ok</div>
    </div>
  </div>

  <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"></script>
  
  <script type="text/javascript">
    $(document).ready(function(){
      $('#modalButton').click(function(){
        $('.ui.modal').modal('show');
      });
    });
  </script>
</body>
</html>

In the above example, we added a button with an id modalButton. When the user clicks on this button, the modal will appear.

Summary

Semantic UI Modal is a component used to create a popup window that displays content on a web page. It is used to display additional content, gather user input, or provide important information to the user. The syntax is simple and easy to use, making it a popular choice for web developers. It is important in web development because it helps to improve the user experience by providing relevant information without interrupting the flow of the page. An example of its usage is provided above.

EmbedPopup
Published on: