El marco de código abierto de la interfaz de usuario semántica brinda íconos o glifos que se usan para mostrar imágenes relacionadas con algunos elementos usando CSS y jQuery que se usan para crear excelentes interfaces de usuario. Es un marco de desarrollo utilizado para crear diseños hermosos y receptivos.
Semantic UI Modal muestra contenido sobre la pantalla que bloquea temporalmente la interacción con la vista principal del sitio web. Necesitamos realizar una acción de acuerdo con los detalles proporcionados por el modal.
El contenido de imagen modal de la interfaz de usuario semántica permite la colocación de contenido de imagen en las pantallas modales. El modal puede incluso contener imágenes también.
Clase de contenido de imagen modal de interfaz de usuario semántica:
- contenido de la imagen : cree un contenedor con esta clase para colocar imágenes dentro de él. Las imágenes se aplican con CSS.
Sintaxis: cree un contenedor con clase de contenido de imagen y colóquelo dentro de la pantalla modal de la siguiente manera:
<div class="header">...</div>
<div class="image content">
....
</div>
</div>
Inicie el modal de la siguiente manera:
$('.ui.modal').modal('show')
Ejemplo : en el siguiente ejemplo, tenemos un modal con contenido de imagen.
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> GeeksforGeeks </h1>
</div>
<strong>Semantic UI Modal Image 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="ui modal"
id="gfgmodal">
<div class="header">
Welcome to GeeksforGeeks
</div>
<div class="image content">
<img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"
alt="GeeksforGeeks"
width="100px"
height="100px"
class="image"
/>
<p class="description">
A computer science portal for geeks.
</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>
Producción:
Contenido de imagen modal de interfaz de usuario semántica
Enlace de referencia: https://semantic-ui.com/modules/modal.html#image-content
Publicación traducida automáticamente
Artículo escrito por manavsarkar07 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA