Semantic-UI Modal Actions Content

Last Updated : 28 Feb, 2022

Semantic UI open-source framework gives icons or glyphs that are used to show pictures related to some elements using CSS and jQuery that is used to create great user interfaces. It is a development framework used to create beautiful and responsive layouts.

Semantic UI Modal displays content above the screen that temporarily blocks interaction with the main view of the website. We need to perform an action according to the details provided by the modal.

Semantic UI Modal Actions Content is used to place a row of actions bottom of the modal. Among them, the most required is accept or reject.

Semantic UI Modal Actions content classes:

actions: Add this class container and place buttons for actions. There are two following common actions either to approve or deny which are defined by the Semantic.
- positive, approve, ok: These classes means approved and are used to fire the callback approval of the modal screen.
- negative, deny, cancel: These classes mean denied and are used to fire the callback on denying of the modal screen.

Syntax: Add the container with actions class and place it inside the modal as follows:

<div class="ui modal">
    ...
    <div class="actions">
        ...
    </div>
</div>

launch the modal as follows:

$('#gfgmodal').modal('show')

We can set the callbacks for approving and denying as follows:

$('.ui.modal').modal({
    onApprove: function () {
        $('.result').text('Approved')
    },
    onDeny: function () {
        $('.result').text('Denied')
    },
})

Example: In the following example, we have two buttons, and then using the callback functions we are updating the result.

HTML

<!DOCTYPE html> 
<html> 
  <head> 
    <title>Semantic-UI Modal Actions Content</title> 
    <meta charset="UTF-8" /> 
    <meta http-equiv="X-UA-Compatible" 
          content="IE=edge" /> 
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0" /> 
    <link href= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
          rel="stylesheet"/> 
    <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> 
    <style> 
      .icon { 
        margin: 16px; 
      } 
    </style> 
  </head> 
  
  <body> 
    <div class="ui container"> 
      <center> 
        <div class="ui header green"> 
          <h1> GeeksforGeeks </h1> 
        </div> 
        <strong> Semantic UI Modal Actions Content </strong> 
      </center> 
  
      <div class="ui segment"> 
        <h1>Welcome to GeeksforGeeks</h1> 
        <p>Find the best programming tutorials here.</p> 
  
        <button class="ui button green" 
                onclick="openModal()"> 
          Open Modal 
        </button> 
        <div class="result"></div> 
        <div class="ui modal"
             id="gfgmodal"> 
          <div class="header"> 
            Welcome to GeeksforGeeks 
          </div> 
  
          <div class="content"> 
            <ul> 
              <li>Data Structures</li> 
              <li>Algorithms</li> 
              <li>Machine Learning</li> 
            </ul> 
            <br /> 
          </div> 
          <div class="actions"> 
            <div class="ui green approve button"> 
              <i class="close icon"></i> 
              Approve 
            </div> 
            <div class="ui red cancel button"> 
              <i class="close icon"></i> 
              Deny 
            </div> 
          </div> 
        </div> 
      </div> 
    </div> 
    <script> 
      const openModal = () => { 
         $('#gfgmodal').modal('show') 
      } 
      $('#gfgmodal').modal({ 
        onApprove: function () { 
          $('.result').text('Approved') 
        }, 
        onDeny: function () { 
          $('.result').text('Denied') 
        }, 
      }) 
    </script> 
  </body> 
</html> 