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 acciones modales de la interfaz de usuario semántica se utiliza para colocar una fila de acciones en la parte inferior del modal. Entre ellos, el más requerido es aceptar o rechazar.
Clases de contenido de acciones modales de interfaz de usuario semántica:
- acciones : agregue este contenedor de clase y coloque botones para acciones. Hay dos acciones comunes siguientes, ya sea para aprobar o denegar, que están definidas por la Semántica.
- positivo, aprobar, ok: estas clases significan aprobado y se utilizan para activar la aprobación de devolución de llamada de la pantalla modal.
- negativo, denegar, cancelar : estas clases significan negado y se utilizan para activar la devolución de llamada al negar la pantalla modal.
Sintaxis : agregue el contenedor con la clase de acciones y colóquelo dentro del modal de la siguiente manera:
<div class="ui modal">
...
<div class="actions">
...
</div>
</div>
inicie el modal de la siguiente manera:
$('#gfgmodal').modal('show')
Podemos configurar las devoluciones de llamada para aprobar y denegar de la siguiente manera:
$('.ui.modal').modal({
onApprove: function () {
$('.result').text('Approved')
},
onDeny: function () {
$('.result').text('Denied')
},
})
Ejemplo : en el siguiente ejemplo, tenemos dos botones y luego, usando las funciones de devolución de llamada, estamos actualizando el resultado.
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>
Producción:
Contenido de acciones modales de interfaz de usuario semántica
Enlace de referencia: https://semantic-ui.com/modules/modal.html#actions
Publicación traducida automáticamente
Artículo escrito por manavsarkar07 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA