Open In App

Semantic-UI Modal

Last Updated : 13 Jun, 2022
Improve
Improve
Like Article
Like
Save
Share
Report

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.

Syntax:

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

Example 1: The following code demonstrates the Semantic-UI Modal Types.

HTML




<!DOCTYPE html>
<html>
<head>
  <title>Semantic UI Modal</title>
  <link rel="stylesheet" 
        href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" />
  
  <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>
</head>
  
<body>
  <div class="ui container center aligned">
    <h2 class="ui green header">
      GeeksforGeeks
    </h2>
    <h3>
      Semantic UI Modal
    </h3>
  
    <div class="ui segment">
      <button class="ui button primary" 
              onclick="modalType()">
        Modal- Modal Type
      </button>
  
      <div class="ui modal" id="modalType">
        <i class="close icon"></i>
        <div class="header">
          GeeksforGeeks
        </div>
        <h4>
          A Computer Science portal for geeks. 
          It contains well written, well thought
          and well explained computer science and
          programming articles
        </h4>
      </div>
    </div>
      
    <div class="ui segment">
      <button class="ui button green" 
              onclick="basicType()">
        Modal- Basic Type
      </button>
      <div class="ui basic modal" id="basicType">
        <div class="ui icon header">
          <i class="web icon"></i>
          GeeksforGeeks
        </div>
        <div class="content">
          <p>
            Welcome to GeeksforGeeks. This is Basic modal.
          </p>
        <br />  
        </div>
        <div class="actions">
          <div class="ui red basic cancel inverted button">
            <i class="close icon"></i>
            Close
          </div>
        </div>
      </div>
    </div>
  </div>
  
  <script>
    const modalType = () => {
        $('#modalType').modal('show');
      }
    const basicType = () => {
        $('#basicType').modal('show');
      }
  </script>
</body>
  
</html>
 






                        










Output:


Semantic-UI Modal Types


Example 2: The following code demonstrates the Semantic-UI Modal Content.




HTML














                                    




                                    

                                    




                                    




                                    

                                    

                                    
                                




















<!DOCTYPE html> 


<html> 


<head> 


  <title>Semantic UI Modal</title> 


  <link rel="stylesheet" 


        href= 


"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> 


  


  <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> 


</head> 


  


<body> 


  <div class="ui container center aligned"> 


    <h2 class="ui green header"> 


      GeeksforGeeks 


    </h2> 


    <h3> 


      Semantic UI Modal 


    </h3> 


  


    <div class="ui segment"> 


      <button class="ui button green" 


              onclick="headerContent()"> 


        Modal- Header Content 


      </button> 


  


      <div class="ui modal" id="headerContent"> 


        <div class="header"> 


          This is Modal Header 


        </div> 


      </div> 


    </div> 


  


    <div class="ui segment"> 


      <button class="ui button green" 


              onclick="contentContent()"> 


        Modal- Content Content 


      </button> 


      <div class="ui modal" id="contentContent"> 


        <div class="content"> 


          <p> GeeksforGeeks Content 1</p> 


          <p> GeeksforGeeks Content 2 </p> 


          <p> GeeksforGeeks Content 3 </p> 


        </div> 


      </div> 


    </div> 


  


    <div class="ui segment"> 


      <button class="ui button green" 


              onclick="imageContent()"> 


        Modal- Image Content 


      </button> 


      <div class="ui modal" id="imageContent"> 


        <div class="image content"> 


          <img class="image" 


               src= 


"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"> 


          <div class="description"> 


            <p> GeeksforGeeks Image </p> 


            <p> GeeksforGeeks Image </p> 


            <p> GeeksforGeeks Image </p> 


          </div> 


        </div> 


      </div> 


    </div> 


  


    <div class="ui segment"> 


      <button class="ui button green" 


              onclick="actionContent()"> 


        Modal- Actions Content 


      </button> 


      <div class="ui modal" id="actionContent"> 


        <div class="header"> 


          GeeksforGeeks 


        </div> 


        <div class="actions"> 


          <div class="ui green approve button"> 


            <i class="close icon"></i> 


            Accepted 


          </div> 


          <div class="ui red cancel button"> 


            <i class="close icon"></i> 


            Rejected 


          </div> 


        </div> 


      </div> 


      <div class="textt"> </div> 


    </div> 


  </div> 


  


  <script> 


    const headerContent = () => { 


        $('#headerContent').modal('show'); 


      } 


    const contentContent = () => { 


        $('#contentContent').modal('show'); 


      } 


    const imageContent = () => { 


        $('#imageContent').modal('show'); 


      } 


  


    const actionContent = () => { 


        $('#actionContent').modal('show'); 


      } 


    $('#actionContent').modal({ 


      onApprove: function () { 


        $('.textt').text('Accepted') 


      }, 


      onDeny: function () { 


        $('.textt').text('Rejected') 


      }, 


    }) 


  </script> 


</body> 


  


</html>



















                        







                        










Output:


Semantic-UI Modal Content.


Example 3: The following code demonstrates the Semantic-UI Modal Variations.




HTML














                                    




                                    

                                    




                                    




                                    

                                    

                                    
                                




















<!DOCTYPE html> 


<html> 


<head> 


  <title> Semantic UI Modal </title> 


  <link rel="stylesheet" 


        href= 


"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> 


  


  <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> 


</head> 


  


<body> 


  <div class="ui container center aligned"> 


    <h2 class="ui green header"> 


      GeeksforGeeks 


    </h2> 


    <h3> 


      Semantic UI Modal 


    </h3> 


  


    <div class="ui segment"> 


      <button class="ui button green" 


              onclick="fullVariation()"> 


        Modal- Full Screen Variation 


      </button> 


  


      <div class="ui fullscreen modal" id="fullVariation"> 


        <div class="header"> 


          This is Full Screen Modal 


        </div> 


        <div class="content"> 


          <p> GeeksforGeeks Content 1</p> 


          <p> GeeksforGeeks Content 2 </p> 


          <p> GeeksforGeeks Content 3 </p> 


        </div> 


      </div> 


    </div> 


    <div class="ui segment"> 


      <div class="ui group"> 


        <button class="ui button primary" 


                onclick="changeSize('mini')"> 


          Mini 


        </button> 


        <button class="ui button primary" 


                onclick="changeSize('tiny')"> 


          Tiny 


        </button> 


        <button class="ui button primary"


                onclick="changeSize('small')"> 


          Small 


        </button> 


        <button class="ui button primary" 


                onclick="changeSize('large')"> 


          Large 


        </button> 


      </div> <br> 


  


      <button class="ui button green" 


              onclick="sizeVariation()"> 


        Modal- Size Variation 


      </button> 


  


      <div class="ui modal" id="sizeVariation"> 


        <div class="content"> 


          <p> GeeksforGeeks 1</p> 


          <p> GeeksforGeeks 2 </p> 


          <p> GeeksforGeeks 3 </p> 


        </div> 


      </div> 


    </div> 


  


    <div class="ui segment"> 


      <button class="ui button green" 


              onclick="scrollVariation()"> 


        Modal- Scrolling Content Variation 


      </button> 


  


      <div class="ui longer modal" id="scrollVariation"> 


        <div class="header"> 


          Scrolling Content Variation 


        </div> 


        <div class="scrolling content"> 


          <p> GFG 1 </p> 


          <p> GFG 2 </p> 


          <p> GFG 3 </p> 


          <p> GFG 4 </p> 


          <p> GFG 5 </p> 


          <p> GFG 6 </p> 


          <p> GFG 7 </p> 


          <p> GFG 8 </p> 


          <p> GFG 9 </p> 


          <p> GFG 10 </p> 


          <p> GFG 11 </p> 


          <p> GFG 12 </p> 


          <p> GFG 13 </p> 


          <p> GFG 14 </p> 


          <p> GFG 15 </p> 


          <p> GFG 16 </p> 


          <p> GFG 17 </p> 


          <p> GFG 18 </p> 


          <p> GFG 19 </p> 


          <p> GFG 20 </p> 


        </div> 


      </div> 


    </div> 


  </div> 


  


  <script> 


    const fullVariation = () => { 


        $('#fullVariation').modal('show'); 


    } 


    const changeSize = (size) => { 


      $('#sizeVariation') 


        .removeClass('small') 


        .removeClass('mini') 


        .removeClass('tiny') 


        .removeClass('large') 


      $('#sizeVariation').addClass(size) 


    } 


    const sizeVariation = () => { 


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


    } 


    const scrollVariation = () => { 


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


    } 


  </script> 


</body> 


  


</html>



















                        







                        










Output:


Semantic-UI Modal Variations


Example 4: The following code demonstrates the Semantic-UI Modal States.




HTML














                                    




                                    

                                    




                                    




                                    

                                    

                                    
                                




















<!DOCTYPE html> 


<html> 


    


<head> 


  <title> Semantic UI Modal </title> 


  <link rel="stylesheet" 


        href= 


"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> 


</head> 


  


<body> 


  <div class="ui container center aligned"> 


    <h2 class="ui green header"> 


      GeeksforGeeks 


    </h2> 


    <h3> 


      Semantic UI Modal 


    </h3> 


  


    <div class="ui active modal"> 


      <div class="header"> 


        Modal- Active State 


      </div> 


      <h3 class="content"> 


        <p> 


          GeeksforGeeks 


        </p> 


        <p> 


          A Computer Science portal for geeks. 


          It contains well-written, well thought 


          and well-explained computer science and 


          programming articles. 


        </p> 


  


  


      </h3> 


    </div> 


  </div> 


</body> 


  


</html>



















                        







                        










Output:


Semantic-UI Modal States


Reference: https://semantic-ui.com/modules/modal.html


                                 


                            

                                

                                    Like Article
                                    
                                

                                

                                    
                                    Suggest improvement
                                

                            


                            

                                                            

                                    
                                        
                                        Previous
                                    
                                    
                                    

                                        Semantic-UI | Embed
                                    

                                

                                                            

                                    
                                        Next
                                        
                                    
                                    
                                    

                                        Semantic-UI Modal Types
                                    

                                

                                                        

                            
    

        

            Share your thoughts in the comments
        

        
    
                            

            

                

                    

                    
                
 
                
    
                            

                                

                            


                            


            

        
 
                        

                                                

                        
                                                    

                                

                                    Similar Reads                                    
                                

                                
      
                                    
        
            

                How to disable click outside modal to close modal in bootstrap ?
            

        
    
        
            

                ReactJS Semantic UI Modal Module
            

        
    
        
            

                Semantic-UI Modal Image Content
            

        
    
        
            

                Semantic-UI Modal Size Variation
            

        
    
        
            

                Semantic-UI Modal Header Content
            

        
    
        
            

                Semantic-UI Modal Basic Type
            

        
    
        
            

                Semantic-UI Modal Actions Content
            

        
    
        
            

                Semantic-UI Modal Full Screen Variation
            

        
    
        
            

                Semantic-UI Modal Scrolling Content Variation
            

        
    
        
            

                Semantic-UI Modal Active State
            

        
                                    

                            

                                                                        

                                

                                    
                                                                    

                            


                        

                        

                            

                                

                                    

                                        
author
        

            
        

        

                                    


                                    

                                        harendra4373                                

                            

                            

            
                                

                            

                                                                    

                                        
Article Tags : 

                                        
                                    

                                                                                            

                                                                                    

                              

                            

                                                        
                        

                    

                

            

        
        


        

                


			
		
		                
        

    

    

        

            

            

        

    












	

    
  

  
  








    
        We use cookies to ensure you have the best browsing experience on our website. By using our site, you
        acknowledge that you have read and understood our
        Cookie Policy &
        Privacy Policy
            
    







   Lightbox