Semantic UI es el marco de código abierto que utilizó CSS y jQuery para hacer que nuestros sitios web se vean hermosos y receptivos. Tiene clases predefinidas como bootstrap para usar para hacer que nuestro sitio web sea más interactivo. Tiene algunos componentes semánticos preconstruidos y podemos usar estos componentes para crear un sitio web receptivo.
Semantic UI Modal se usa para mostrar el contenido en la pantalla que puede bloquear temporalmente la interacción con el contenido principal. Podemos poner cualquier tipo de contenido dentro del modal. En este artículo, discutiremos los estados modales en la interfaz de usuario semántica.
Clase de estados modales de interfaz de usuario semántica:
- active : esta clase se utiliza para mostrar el modal activo en la página.
Sintaxis:
<div class="ui active modal"> .... </div>
Ejemplo 1: el siguiente código muestra los estados modales de la interfaz de usuario semántica con algo de contenido.
HTML
<!DOCTYPE html> <html> <head> <title> Semantic-UI Modal States </title> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> </head> <body> <div class="ui container center aligned"> <h2 class="ui green header"> GeeksforGeeks </h2> <h3> Semantic-UI Modal States </h3> <div class="ui active modal"> <div class="header"> This is active modal. </div> <h3 class="header"> A Computer Science portal for geeks. </h3> </div> </div> </body> </html>
Producción:
Estados modales de interfaz de usuario semántica
Ejemplo 2: el siguiente código demuestra los estados modales de la interfaz de usuario semántica con una imagen y contenido.
HTML
<!DOCTYPE html> <html> <head> <title> Semantic-UI Modal States </title> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> </head> <body> <div class="ui container center aligned"> <h2 class="ui green header"> GeeksforGeeks </h2> <h3> Semantic-UI Modal States </h3> <div class="ui active modal"> <div class="header"> GeeksforGeeks Active modal </div> <div class="image content"> <img class="image" src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"> <div class="description"> <h3> About GeeksforGeeks </h3> <p> A Computer Science portal for geeks. It contains well written, well thought and well explained computer science and programming articles. </p> </div> </div> </div> </div> </body> </html>
Producción:
Estados modales de interfaz de usuario semántica
Referencia: https://semantic-ui.com/modules/modal.html#active
Publicación traducida automáticamente
Artículo escrito por singh_teekam y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA