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.
Una ventana emergente muestra datos adicionales sobre el elemento al usuario cuando se desplaza sobre él. La interfaz de usuario semántica nos proporciona una ventana emergente con estilo. Echemos un vistazo a varias clases de tipos preexistentes emergentes .
Clase de tipo preexistente emergente de interfaz de usuario semántica:
- popup: Crea una ventana emergente estándar.
Sintaxis:
<div class="ui popup">
...
</div>
Ejemplo 1 : en el siguiente ejemplo, hemos creado un tipo de ventana emergente preexistente estándar .
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI Popup Pre Existing Type</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"
integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
</script>
</head>
<body>
<div class="ui container">
<h2 class="ui green header">GeeksforGeeks</h2>
<h4>Semantic UI Pre Existing Type</h4>
<hr>
<br />
<div class="ui button" data-position="bottom center">
Display a pre-existing popup
</div>
<div class="ui popup">
I am a pre-existing popup
</div>
</div>
<script>
$('.button').popup()
</script>
</body>
</html>
Producción:
ventana emergente preexistente
Ejemplo 2: en el siguiente ejemplo, hemos creado una ventana emergente preexistente fluida que ocupa todo el ancho del contenedor.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI Popup Pre Existing Type</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"
integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
</script>
</head>
<body>
<div class="ui container">
<h2 class="ui green header">GeeksforGeeks</h2>
<h4>Semantic UI Pre Existing Type</h4>
<hr>
<br />
<div class="ui button" data-position="bottom center">
Display a pre-existing popup
</div>
<div class="ui fluid popup">
<h3 class="ui green header">Pre-Existing</h3>
<p>I am a pre-existing popup</p>
</div>
</div>
<script>
$('.button').popup()
</script>
</body>
</html>
Producción:
Ventana emergente fluida preexistente
Referencia: https://semantic-ui.com/modules/popup.html#pre-existente
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