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 su uso y tiene diferentes elementos para hacer que su sitio web se vea más sorprendente. Utiliza una clase para agregar CSS a los elementos.
Modal generalmente se usa para desviar la atención del usuario a una parte separada del contenido principal, ya que las interacciones adicionales del sitio web pueden depender de alguna acción que debe realizar el usuario. La interfaz de usuario semántica nos proporciona un modal de estilo personalizado. Antes de conocer los distintos tipos modales, echemos un vistazo a las clases que nos permiten usar los modales de la interfaz de usuario semántica.
Clases modales de interfaz de usuario semántica:
- modal: esta clase se utiliza para establecer un modal de interfaz de usuario semántica estándar.
- basic : Esta clase se utiliza para establecer un modal básico acompañado de la clase modal.
Sintaxis:
<div class="ui Modal-Classes modal">
....
</div>
Ejemplo: en el siguiente ejemplo, hemos creado un modal de interfaz de usuario semántica estándar.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI Modal Types</title>
<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"
crossorigin="anonymous">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
</script>
</head>
<body style="width:100vw; height:100vh;">
<div class="ui container">
<h2 class="ui green header">GeeksforGeeks</h2>
<h4>Semantic UI Modal Types</h4>
<hr>
<br />
<div class="ui modal">
<i class="close icon"></i>
<div class="header">
Standard Modal
</div>
<div class="image content">
<div class="ui large image">
<img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210310114057/web-development-image.png">
</div>
<div class="description">
<div class="ui header">Description Header</div>
<p>
GeeksForGeeks is an amazing
website to learn coding.
</p>
<p>
Machine Learning, Web Development,
Android Development, Data Science,
you name it, it's all available on
GeeksForGeeks.
</p>
</div>
</div>
<div class="actions">
<div class="ui negative button">
Sort of agree
</div>
<div class="ui positive button">
Agree
</div>
</div>
</div>
<button class="ui button"
onclick="openModal()">
Click Me
</button>
</div>
<script>
const openModal = () => {
$('.ui.modal').modal('setting',
'transition', 'scale').modal('show');
}
</script>
</body>
</html>
Producción:
Tipos modales de interfaz de usuario semántica
Ejemplo: en el siguiente ejemplo, hemos creado un modal de interfaz de usuario semántico básico .
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI Modal Types</title>
<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"
crossorigin="anonymous">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
</script>
</head>
<body style="width:100vw; height:100vh;">
<div class="ui container">
<h2 class="ui green header">GeeksforGeeks</h2>
<h4>Semantic UI Modal Types</h4>
<hr>
<br />
<div class="ui basic modal">
<div class="ui icon header">
<i class="smile outline icon"></i>
Agree or Not?
</div>
<div class="content">
<p>You still don't agree that
GeeksForGeeks is an amazing website?</p>
</div>
<div class="actions">
<div class="ui negative button">
I agree
</div>
<div class="ui positive button">
Of course it's awesome
</div>
</div>
</div>
<button class="ui button"
onclick="openModal()">
Click Me
</button>
</div>
<script>
const openModal = () => {
$('.ui.modal').modal('setting',
'transition', 'vertical flip').modal('show');
}
</script>
</body>
</html>
Producción:
Tipos modales de interfaz de usuario semántica
Referencias: https://semantic-ui.com/modules/modal.html
Publicación traducida automáticamente
Artículo escrito por coder_srinivas y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA