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. Necesitamos realizar una acción de acuerdo con los detalles proporcionados por el modal.
El contenido del encabezado modal de la interfaz de usuario semántica establece un encabezado para la pantalla modal. Podemos establecer el encabezado de la pantalla modal que aparece en la parte superior de la pantalla modal.
Clases de contenido de encabezado modal de interfaz de usuario semántica:
- header : cree un contenedor con esta clase y el contenedor se formateará como un encabezado. El encabezado normalmente contiene texto y, a veces, un icono.
Sintaxis : agregue la clase de encabezado a un contenedor como elemento secundario de la pantalla modal de la siguiente manera:
<div class="ui modal">
<div class="header"> ... </div>
</div>
inicie el modal de la siguiente manera:
$('.ui.modal').modal('show')
Ejemplo : En el siguiente ejemplo, tenemos una pantalla modal con un encabezado que muestra un mensaje de bienvenida.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic-UI Modal Header 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 Header 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">
<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 red cancel button">
<i class="close icon"></i>
Close
</div>
</div>
</div>
</div>
</div>
<script>
const openModal = () => {
$('.ui.modal').modal('show')
}
</script>
</body>
</html>
Producción:
Contenido de encabezado modal de interfaz de usuario semántica
Referencia: https://semantic-ui.com/modules/modal.html#header
Publicación traducida automáticamente
Artículo escrito por manavsarkar07 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA