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.
La variación del tamaño modal de la interfaz de usuario semántica se utiliza para modificar el tamaño de los modales. Podemos tener diferentes tamaños de modales como pequeño, normal o enorme.
Clases de variación de tamaño modal de IU semántica:
- mini : Agregando esta clase, el modal será de tamaño mini.
- tiny : Al agregar esta clase, el modal será de tamaño tiny.
- small : Al agregar esta clase, el modal será de tamaño pequeño.
- grande : agregando esta clase, el modal será de un tamaño grande.
Sintaxis : agregue el tamaño deseado al contenedor modal de las clases anteriores de la siguiente manera:
<div class="ui large modal">
....
</div>
lanzar el modal:
$('.ui.large.modal').modal('show')
Ejemplo : en el siguiente ejemplo, tenemos un conjunto de botones para cambiar el tamaño del modal y luego podemos ver los modales de diferentes tamaños.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic-UI Modal Size Variation</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 Size Variation </strong>
</center>
<div class="ui segment">
<h1>Welcome to GeeksforGeeks</h1>
<p>Find the best programming tutorials here.</p>
<div class="ui group">
<button class="ui button orange"
onclick="changeSize('mini')">
Mini
</button>
<button class="ui button orange"
onclick="changeSize('tiny')">
Tiny
</button>
<button class="ui button orange"
onclick="changeSize('small')">
Small
</button>
<button class="ui button orange"
onclick="changeSize('large')">
Large
</button>
</div>
<br />
<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="content">
<ul>
<li>Data Structures</li>
<li>Algorithms</li>
<li>Machine Learning</li>
</ul>
</div>
<div class="actions">
<div class="ui red cancel button">
<i class="close icon"></i>
Close
</div>
</div>
</div>
</div>
</div>
<script>
const changeSize = (size) => {
$('#gfgmodal')
.removeClass('small')
.removeClass('mini')
.removeClass('tiny')
.removeClass('large')
$('#gfgmodal').addClass(size)
}
const openModal = () => {
$('#gfgmodal').modal('show')
}
</script>
</body>
</html>
Producción:
Variación de tamaño modal de interfaz de usuario semántica
Enlace de referencia: https://semantic-ui.com/modules/modal.html#size
Publicación traducida automáticamente
Artículo escrito por manavsarkar07 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA