What is Semantic-UI Modal Image Content?

In this article, we will learn Semantic-UI Modal Image Content,This free Semantic-UI tutorial for complete beginners will help you learn Semantic-UI from scratch.

Semantic-UI Modal Image Content - ❤️Semantic-UI Tutorials In 2024

Q: How to use Semantic-UI Modal Image Content in Semantic-UI?

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

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 Image Content enables the placement of image content in the modal screens. The modal can even contain images also.

Semantic UI Modal Image content class:

image content: Create a container with this class to place images inside it. The images are applied with CSS.

Syntax: Create a container with image content class and place it inside the modal screen as follows:

<div class="header">...</div>
  <div class="image content">
        ....
  </div>
</div>

Launch the modal as follows:

$('.ui.modal').modal('show')

Example: In the following example, we have a modal with image content.

HTML

<!DOCTYPE html> 
<html> 
  <head> 
    <title>Semantic-UI Modal Image 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> w3wiki  </h1> 
        </div> 
        <strong>Semantic UI Modal Image Content </strong> 
      </center> 
  
      <div class="ui segment"> 
        <h1>Welcome to w3wiki</h1> 
        <p>Find the best programming tutorials here.</p> 
  
        <button class="ui button green"
                onclick="openModal()"> 
          Open Modal 
        </button> 
        <div class="ui modal" 
             id="gfgmodal"> 
          <div class="header"> 
            Welcome to w3wiki 
          </div> 
          <div class="image content"> 
            <img src= 
"https://media.w3wiki.net/wp-content/cdn-uploads/20190710102234/download3.png"
              alt="w3wiki"
              width="100px"
              height="100px"
              class="image"
            /> 
            <p class="description"> 
               A computer science portal for Beginner. 
            </p> 
  
          </div> 
          
          <div class="actions"> 
            <div class="ui red cancel button"> 
              <i class="close icon"></i> 
              Close 
            </div> 
          </div> 
        </div> 
      </div> 
    </div> 
    <script> 
      const openModal = () => { 
        $('#gfgmodal').modal('show') 
      } 
    </script> 
  </body> 
</html> 

Output:

Semantic-UI Modal Image Content

Reference link: https://semantic-ui.com/modules/modal.html#image-content