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.
Semantic UI Modal Basic Type es un modal muy básico y liviano que aparece en la parte superior de la pantalla. El modal tiene un fondo transparente que bloquea parcialmente la interfaz de usuario del sitio principal.
Clase de tipo básico modal de interfaz de usuario semántica:
- básico : agregue esta clase a la pantalla modal y luego el modal se vuelve de tipo básico.
Sintaxis : agregue la clase básica al modal de la siguiente manera:
<div class="ui basic modal">
....
</div>
Inicie el modal:
$('.ui.basic.modal').modal('show')
Ejemplo : en el siguiente ejemplo, tenemos un botón que, al hacer clic, aparece el modal básico en la pantalla.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic-UI Modal Basic Type</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 Basic Type
</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 basic modal">
<div class="ui icon header">
<i class="web icon"></i>
GeeksforGeeks
</div>
<div class="content">
<p>Welcome to GeeksforGeeks. This is a modal.</p>
<br />
</div>
<div class="actions">
<div class="ui red basic cancel inverted button">
<i class="close icon"></i>
Close
</div>
</div>
</div>
</div>
</div>
<script>
const openModal = () => {
$('.ui.basic.modal').modal('show')
}
</script>
</body>
</html>
Producción:
Tipo básico modal de interfaz de usuario semántica
Enlace de referencia: https://semantic-ui.com/modules/modal.html#basic
Publicación traducida automáticamente
Artículo escrito por manavsarkar07 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA