Semantic UI es un marco de código abierto que utiliza CSS y jQuery para crear excelentes interfaces de usuario. Es lo mismo que un bootstrap para usar y tiene grandes elementos diferentes para usar para hacer que su sitio web se vea más increíble. Semantic UI Modal muestra contenido sobre la pantalla que bloquea temporalmente la interacción con la vista principal del sitio. Tenemos que actuar de acuerdo con los detalles proporcionados por el modal. Semantic-UI Modal Active State se usa para establecer si un modal activo está visible en la página o no.
Clase de estado activo modal de interfaz de usuario semántica:
- Modo activo de la interfaz de usuario: esta clase se utiliza para establecer si un modo activo está visible en la página o no.
Sintaxis:
<div class="ui active modal"></div>
Ejemplo: El siguiente ejemplo ilustra el estado activo modal de la interfaz de usuario semántica.
HTML
<!DOCTYPE html>
<html>
<head>
<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 Active State </strong>
</center>
<div class="ui segment">
<div class="ui active modal"></div>
<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:
Enlace de referencia: https://semantic-ui.com/modules/modal.html#active
Publicación traducida automáticamente
Artículo escrito por Kanchan_Ray y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA