Tipos de ventanas emergentes de interfaz de usuario semántica

Posted on by Rudeus Greyrat

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 varios tipos de ventanas emergentes .

Tipos de ventana emergente de interfaz de usuario semántica:

  • Ventana emergente estándar : una ventana emergente con estilo de interfaz de usuario semántica estándar. Los datos emergentes se almacenan en elatributo de contenido de datos .
  • Titulado : la interfaz de usuario semántica nos brinda la opción de especificar un título para la ventana emergente. Los datos del título emergente se almacenan en elatributo de título de datos .
  • HTML : se puede diseñar una ventana emergente utilizando HTML y varias clases proporcionadas por la interfaz de usuario semántica. La ventana emergente con estilo HTML se almacena en elatributo data-html .
  • Preexistente : predefinimos una ventana emergente y la usamos en otros elementos definidos.
  • Información sobre herramientas : podemos mostrar una ventana emergente independiente de JavaScript, utilizando elatributo de información sobre herramientas de datos .

Sintaxis:

<div class="ui" data-content="..." data-title="..." 
    data-html="..." data-tooltip="...">
      ...
</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 una ventana emergente estándar .

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>Semantic UI Popup 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"
           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 Popup Types</h4>
        <hr>
        <br />
        <div class="ui button" data-content="A Standard Popup">
            Hover Over me to display a popup
        </div>
    </div>
 
    <script>
        $('.button').popup()
    </script>
</body>
</html>

Producción:

Ventana emergente estándar

Ejemplo 2: En el siguiente ejemplo, hemos creado una ventana emergente titulada .

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>Semantic UI Popup 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"
        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 Popup Types</h4>
        <hr>
        <br />
        <div class="ui button" data-title="Title"
             data-content="A Titled Popup">
            Hover Over me to display a popup
        </div>
    </div>
 
    <script>
        $('.button').popup()
    </script>
</body>
</html>

Producción:

Ventana emergente titulada

Ejemplo 3: En el siguiente ejemplo, hemos creado una ventana emergente HTML con estilo .

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>Semantic UI Popup 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"
           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 Popup Types</h4>
        <hr>
        <br />
        <div class="ui button" data-html=
            "<h3 class='ui header green'>HTML</h3>
 
<p>A HTML popup</p>
 
"
            data-variation="mini">
            Hover Over me to display a popup
        </div>
    </div>
 
    <script>
        $('.button').popup()
    </script>
</body>
</html>

Producción:

Ventana emergente HTML

Ejemplo 4: en el siguiente ejemplo, hemos creado una ventana emergente preexistente .

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>Semantic UI Popup 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"
           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 Popup Types</h4>
        <hr>
        <br />
        <div class="ui button" data-position="bottom right">
            Hover Over me to display a popup
        </div>
        <div class="ui popup">
            <h3 class='ui header green'>Pre-Existing</h3>
             
<p>A Pre-existing Popup</p>
 
        </div>
    </div>
 
    <script>
        $('.button').popup()
    </script>
</body>
</html>

Producción:

Ventana emergente preexistente

Ejemplo 5: En el siguiente ejemplo, hemos creado una ventana emergente de información sobre herramientas .

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>Semantic UI Popup 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"
           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 Popup Types</h4>
        <hr>
        <br />
        <div class="ui button" data-tooltip="I am a tooltip popup"
             data-inverted="" data-position="bottom left">
            Hover Over me to display a popup
        </div>
    </div>
</body>
</html>

Producción:

Ventana emergente de información sobre herramientas

Referencia: https://semantic-ui.com/modules/popup.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

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *