Opciones avanzadas de Foundation CSS Reveal

Posted on by Rudeus Greyrat

Foundation CSS es un marco front-end de código abierto que se utiliza para crear un hermoso sitio web, aplicaciones o correo electrónico con capacidad de respuesta de forma rápida y sencilla. ZURB lo publicó en septiembre de ese año. Numerosas empresas, como Facebook, eBay, Mozilla, Adobe e incluso Disney, lo utilizan. Este marco, que se asemeja a SaaS, se basa en el marco Bootstrap. Es más complejo, flexible e individualizado. Trabajar con paquetes de módulos también es muy sencillo debido a su interfaz de línea de comandos. El marco de correo electrónico crea correos electrónicos HTML que se pueden ver en todos los dispositivos y son aptos para dispositivos móviles. Con Foundation for Apps, puede crear aplicaciones web totalmente receptivas.

La ventana emergente o modal Revelar , que contiene información, aparece cuando hacemos clic en el botón. La información en la ventana emergente se puede ver sin cambiar a otra página. Las opciones avanzadas proporcionadas por Reveal se proporcionan sin superposiciones ni animaciones. 

Sin superposición es la función en la que no hay máscara en el fondo usando solo un atributo. Se pueden agregar animaciones a la apertura y el cierre del modal de revelación agregando atributos de entrada de animación de datos y salida de animación de datos . No necesitamos ninguna clase específica para aplicar estas opciones avanzadas.

 Foundation CSS Reveal Atributos de opciones avanzadas:

Sin superposición:

  • superposición de datos: este atributo se usa para alternar la superposición del fondo del modal. El valor de este atributo debe establecerse en falso para aplicar la opción Sin superposición. 

Sintaxis:

<button class="button" 
    data-toggle="exampleModal">. .</button>
<div class="reveal" id="exampleModal" 
    data-reveal data-overlay="false">
        ...
    <button class="close-button" data-close> </button>
</div>

Animaciones:

  • data-animation-in: este atributo se usa para especificar la animación por la cual se abrirá el modal. Los valores de este atributo son transiciones de la biblioteca Motion UI.
  • data-animation-out: este atributo se usa para especificar la animación por la cual se cerrará el modal. Los valores de este atributo son transiciones de la biblioteca Motion UI.

Sintaxis:

<button class="button" 
    data-toggle="exampleModal">. .</button>
<div class="reveal" id="exampleModal" 
    data-reveal data-animation-in="..." 
    data-animation-out="...">
        ...
    <button class="close-button" data-close> </button>
</div>

Ejemplo 1: El siguiente código se usa para mostrar la opción sin superposición usando el atributo de superposición de datos .

HTML

<!DOCTYPE html>
<html>
   
<head>
    <!-- Compressed CSS -->
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css">
    <link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/motion-ui/1.2.1/motion-ui.min.css" />
    <!-- Compressed JavaScript -->
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js">
    </script>
    <script src=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.5.1/dist/js/foundation.min.js">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/motion-ui/1.2.1/motion-ui.min.js">
    </script>
</head>
  
<body>
    <center>
        <h2 style="color: green;">
            GeeksforGeeks
        </h2>
        <h3>Foundation CSS Reveal Advanced Options</h3>
  
        <p><button class="button" 
            data-toggle="exampleModal">
                Click me for a modal
            </button>
        </p>
  
    </center>
  
    <div class="reveal" id="exampleModal" 
        aria-labelledby="exampleModalLabel1" 
        data-reveal data-overlay="false">
          
        <h1 id="exampleModalLabel1">
            GeeksforGeeks
        </h1>
          
        <strong>About Us!</strong>
          
        <p class="lead">
            A Computer Science portal for geeks.
            Gain and share your knowledge & skills 
            with a variety of learning platforms 
            offered by GeeksforGeeks. Billions of 
            Users, Millions of Articles Published,
            Thousands Got Hired by Top Companies 
            and the numbers are still growing. We 
            provide a variety of services for you 
            to learn, thrive and also have fun!
        </p>
  
        <button class="close-button" 
            data-close aria-label="Close Accessible Modal" 
            type="button">
            <span aria-hidden="true">×</span>
        </button>
    </div>
      
    <script>
        $(document).ready(function () {
            $(document).foundation();
        })
    </script>
</body>
  
</html>

Producción:

 

Ejemplo 2: el siguiente código muestra cómo agregar animaciones a un modal usando los atributos data-animation-in y data-animation-out .

HTML

<!DOCTYPE html>
<html>
   
<head>
    <!-- Compressed CSS -->
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css">
    <link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/motion-ui/1.2.1/motion-ui.min.css" />
    <!-- Compressed JavaScript -->
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js">
    </script>
    <script src=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.5.1/dist/js/foundation.min.js">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/motion-ui/1.2.1/motion-ui.min.js">
    </script>
</head>
  
<body>
    <center>
        <h2 style="color: green;">
            GeeksforGeeks
        </h2>
        <h3>Foundation CSS Reveal Advanced Options</h3>
  
        <p><button class="button" 
            data-toggle="exampleModal">
                Click me for a modal
            </button>
        </p>
    </center>
  
    <div class="reveal" id="exampleModal" 
        aria-labelledby="exampleModalLabel1" 
        data-reveal data-close-on-click="true"
        data-animation-in="spin-in" 
        data-animation-out="spin-out">
          
        <h1 id="exampleModalLabel1">
            GeeksforGeeks
        </h1>
          
        <strong>About Us!</strong>
          
        <p class="lead">
            A Computer Science portal for geeks.
            Gain and share your knowledge & skills 
            with a variety of learning platforms 
            offered by GeeksforGeeks. Billions
            of Users, Millions of Articles Published, 
            Thousands Got Hired by Top Companies and 
            the numbers are still growing. We provide 
            a variety of services for you to learn, 
            thrive and also have fun!
        </p>
  
        <button class="close-button" 
            data-close aria-label="Close Accessible Modal" 
            type="button">
            <span aria-hidden="true">×</span>
        </button>
    </div>
      
    <script>
        $(document).ready(function () {
            $(document).foundation();
        })
    </script>
</body>
  
</html>

Producción:

 

Referencia: https://get.foundation/sites/docs/reveal.html#advanced-options

Publicación traducida automáticamente

Artículo escrito por priyanshuchatterjee01 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 *