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. Tenemos que actuar de acuerdo con los detalles proporcionados por el modal.
La variación modal de pantalla completa de la interfaz de usuario semántica hace que la pantalla modal aparezca en el modo de pantalla completa. Eso significa que el modal cubre toda la pantalla u oculta todo el sitio principal de la vista.
Clases de variación de pantalla completa modal de interfaz de usuario semántica:
- pantalla completa : agregue esta clase a la pantalla modal y la pantalla modal aparecerá en la pantalla completa.
Sintaxis : agregue la clase de pantalla completa al contenedor modal de la siguiente manera:
<div class="ui fullscreen modal">
...
</div>
inicie el modal de la siguiente manera:
$('.ui.basic.modal').modal('show')
Ejemplo : en el siguiente ejemplo, tenemos un modal de pantalla completa.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic-UI Modal Full Screen 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 FullScreen Variation </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 fullscreen 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 openModal = () => {
$('#gfgmodal').modal('show')
}
</script>
</body>
</html>
Producción:
Variación de pantalla completa modal de interfaz de usuario semántica
Enlace de referencia: https://semantic-ui.com/modules/modal.html#full-screen
Publicación traducida automáticamente
Artículo escrito por manavsarkar07 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA