Fundación - Llamada Cerrable

Descripción

La llamada se puede cerrar utilizando el atributo que se puede cerrar por datos en un elemento, lo que crea el cuadro de alerta descartable.

Ejemplo

El siguiente ejemplo demuestra el uso de la llamada que se puede cerrar en Foundation:

<!doctype html>
   <head>
      <meta charset = "utf-8" />
      <meta http-equiv = "x-ua-compatible" content = "ie = edge" />
      <meta name = "viewport" content = "width = device-width, initial-scale = 1.0" />
      
      <title>Closable Callout</title>
      
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.5/css/foundation.css">
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/motion-ui/1.1.1/motion-ui.css"/>
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.5/js/vendor/jquery.min.js"></script>
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.5/js/foundation.min.js"></script>
   </head>

   <body>
      <h2>Closable Callout Example</h2>
      <div class = "alert callout" data-closable>
         <h5>This is Closable Callout</h5>
         <p>Foundation is a responsive front-end framework.</p>
         <button class = "close-button" data-close aria-label = "Dismiss alert">×</button>
      </div>
   </body>
</html>

Salida

Realicemos los siguientes pasos para ver cómo funciona el código anterior:

Guarde el código html dado anteriormente making_closable.html archivo.
Abra este archivo HTML en un navegador, se muestra una salida como se muestra a continuación.

↰ Previous page