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.
Los modales generalmente se usan 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.
Echemos un vistazo a las diversas clases de variación modal de la interfaz de usuario semántica, antes de saltar a las variaciones modales.
Variaciones modales de la interfaz de usuario semántica:
- Pantalla completa: 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.
- Tamaño: la variación de 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.
- Desplazamiento : la variación de desplazamiento modal de la interfaz de usuario semántica se utiliza para establecer el modal en el modo de desplazamiento.
Sintaxis:
<div class="ui Modal-Variation modal">
<div class="header">....</div>
<div class="content">
....
</div>
</div>
Nota: Utilice la sintaxis anterior según la necesidad mediante una combinación de las clases mencionadas anteriormente. Consulte los ejemplos a continuación para una mejor comprensión de las clases.
Ejemplo 1: en el siguiente ejemplo, hemos creado un modal de pantalla completa .
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI Modal Variations</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 Variations</h4>
<hr>
<br />
<div class="ui fullscreen modal">
<div class="ui header">
GeeksForGeeks is Awesome or Not?
</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">Have a Peek</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 cancel button">
Sort of agree
</div>
<div class="ui positive ok button">
Agree
</div>
</div>
</div>
<button class="ui button"
onclick="openModal()">
Fullscreen Modal
</button>
</div>
<script>
const openModal = () => {
$('.ui.modal').modal('setting',
'transition', 'fade up').modal('show');
}
</script>
</body>
</html>
Producción:
Variaciones modales de la interfaz de usuario semántica
Ejemplo 2: en el siguiente ejemplo, hemos creado modal de varias clases de tamaño como se mencionó anteriormente. Las clases de tamaño utilizadas son diminuto , mini , pequeño y grande .
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI Modal Variations</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 Variations</h4>
<hr>
<br />
<div class="ui mini modal">
<div class="ui header">
GeeksforGeeks is Awesome or Not?
</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">Have a Peek</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 cancel button">
Sort of agree
</div>
<div class="ui positive ok button">
Agree
</div>
</div>
</div>
<div class="ui tiny modal">
<div class="ui header">
GeeksforGeeks is Awesome or Not?
</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">Have a Peek</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 cancel button">
Sort of agree
</div>
<div class="ui positive ok button">
Agree
</div>
</div>
</div>
<div class="ui small modal">
<div class="ui header">
GeeksforGeeks is Awesome or Not?
</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">Have a Peek</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 cancel button">
Sort of agree
</div>
<div class="ui positive ok button">
Agree
</div>
</div>
</div>
<div class="ui large modal">
<div class="ui header">
GeeksforGeeks is Awesome or Not?
</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">Have a Peek</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 cancel button">
Sort of agree
</div>
<div class="ui positive ok button">
Agree
</div>
</div>
</div>
<button class="ui button"
onclick="openMiniModal()">
Mini Modal
</button>
<button class="ui button"
onclick="openTinyModal()">
Tiny Modal
</button>
<button class="ui button"
onclick="openSmallModal()">
Small Modal
</button>
<button class="ui button"
onclick="openLargeModal()">
Large Modal
</button>
</div>
<script>
const openMiniModal = () => {
$('.ui.mini.modal').modal('setting',
'transition', 'fade down').modal('show');
}
const openTinyModal = () => {
$('.ui.tiny.modal').modal('setting',
'transition', 'scale').modal('show');
}
const openSmallModal = () => {
$('.ui.small.modal').modal('setting',
'transition', 'fade up').modal('show');
}
const openLargeModal = () => {
$('.ui.large.modal').modal('setting',
'transition', 'vertical flip').modal('show');
}
</script>
</body>
</html>
Producción:
Variaciones modales de la interfaz de usuario semántica
Ejemplo 3: En el siguiente ejemplo, hemos creado un modal desplazable .
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI Modal Variations</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 Variations</h4>
<hr>
<br />
<div class="ui large modal">
<div class="ui header">
GeeksforGeeks is Awesome or Not?
</div>
<div class="image scrolling 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">Have a Peek</div>
<p>
Greetings to all the Geeks out there!
We welcome you to the platform where we
consistently strive to offer the best of
education.
</p>
<p>
This platform has been designed for every
geeks wishing to expand knowledge, share
their knowledge and is ready to grab their
dream job. We have millions of articles,
live as well as online courses, thousands
of tutorials
and much more just for the geek inside you.
Thank you for choosing and supporting us!
</p>
<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>
<p>
Greetings to all the Geeks out there!
We welcome you to the platform where
we consistently
strive to offer the best of education.
</p>
<p>
This platform has been designed for
every geeks wishing to expand knowledge,
share their knowledge, and is ready to
grab their dream job. We have millions
of articles, live as well as online
courses, thousands of tutorials and
much more just for the geek inside you.
Thank you for choosing and supporting us!
</p>
<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>
<p>
Greetings to all the Geeks out there! We
welcome you to the platform where we
consistently
strive to offer the best of education.
</p>
<p>
This platform has been designed for every
geeks wishing to expand knowledge, share
their knowledge and is ready to grab their
dream job. We have millions of articles,
live as well as online courses, thousands
of tutorials and much more just for the
geek inside you.
Thank you for choosing and supporting us!
</p>
<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>
<p>
This platform has been designed for every
geeks wishing to expand knowledge, share
their knowledge and is ready to grab their
dream job. We have millions of articles,
live as well as online courses, thousands
of tutorials and much more just for the
geek inside you.
Thank you for choosing and supporting us!
</p>
<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>
<p>
Greetings to all the Geeks out there! We
welcome you to the platform where we
consistently
strive to offer the best of education.
</p>
<p>
This platform has been designed for every
geeks wishing to expand knowledge, share
their knowledge and is ready to grab their
dream job. We have millions of articles,
live as well as online courses, thousands
of tutorials and much more just for the
geek inside you.
Thank you for choosing and supporting us!
</p>
<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 cancel button">
Sort of agree
</div>
<div class="ui positive ok button">
Agree
</div>
</div>
</div>
<button class="ui button" onclick="openModal()">
Scrolling Modal
</button>
</div>
<script>
const openModal = () => {
$('.ui.modal').modal('setting',
'transition', 'vertical flip')
.modal('show');
}
</script>
</body>
</html>
Producción:
Variaciones modales de la interfaz de usuario semántica
Referencia: 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