Foundation CSS es un marco front-end receptivo y de código abierto creado por ZURB en septiembre de 2011 que simplifica la creación de sorprendentes sitios web, aplicaciones y correos electrónicos receptivos que funcionan en cualquier dispositivo. Muchas empresas, como Facebook, eBay, Mozilla, Adobe e incluso Disney, lo utilizan. Este marco se basa en bootstrap, que es similar a SaaS. Es más complejo, versátil y configurable. También viene con una interfaz de línea de comandos, lo que facilita su uso con paquetes de módulos. El marco de correo electrónico le proporciona correos electrónicos HTML receptivos, que se pueden leer en cualquier dispositivo. Foundation for Apps le permite crear aplicaciones web totalmente receptivas.
Revelar es la ventana modal o emergente que se utiliza para mostrar información cuando hacemos clic en el botón. Podemos crear una ventana emergente para mostrar algún contenido sin navegar a otra página. Reveal Nested Modal se usa para crear ventanas emergentes o modales anidadas y cada ventana puede almacenar algo de contenido. Un modal puede abrir otro modal con la ayuda de la identificación y el atributo de apertura de datos. En este artículo, discutiremos cómo crear modales anidados en Foundation CSS.
Foundation CSS Reveal clase modal anidada:
- revelar : esta clase se utiliza para crear la ventana modal o emergente.
Sintaxis:
<button class="button" data-open="reveal1">
Reveal this
</button>
<!-- First modal -->
<div class="reveal" id="reveal1" data-reveal>
......
<button class="button" data-open="reveal2">
Reveal nested modal
</button>
</div>
<!-- Nested modal -->
<div class="reveal" id="reveal2" data-reveal>
....
</div>
Ejemplo 1: el siguiente código muestra el modal anidado de revelación con algo de contenido.
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">
<!-- 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>
</head>
<body>
<center>
<h2 style="color: green;">
GeeksforGeeks
</h2>
<h3>Foundation CSS Reveal Nested Modal</h3>
<button class="button"
data-open="modal1">
Reveal first modal</button>
<div class="reveal"
id="modal1"
data-reveal>
<strong>Modal 1</strong> <br>
<p>A Computer Science portal for geeks.
It contains well written, well thought and
well explained computer science and
programming articles
</p>
<button class="button"
data-open="modal2">
Reveal second modal
</button>
<button class="close-button"
data-close type="button">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="reveal" id="modal2" data-reveal>
<h2>This is Modal 2</h2>
<p>With the idea of imparting programming
knowledge, Mr. Sandeep Jain, an IIT
Roorkee alumnus started a dream, GeeksforGeeks</p>
<button class="close-button"
data-close
type="button">
<span aria-hidden="true">×</span>
</button>
</div>
</center>
<script>
$(document).ready(function () {
$(document).foundation();
})
</script>
</body>
</html>
Producción:
Ejemplo 2: El siguiente código demuestra el Reveal Nested Modal con texto e imágenes.
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">
<!-- 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>
</head>
<body>
<center>
<h2 style="color: green;">
GeeksforGeeks
</h2>
<h3>Foundation CSS Reveal Nested Modal</h3>
<!-- First modal -->
<button class="button" data-open="modal1">
Reveal first modal</button>
<div class="reveal" id="modal1" data-reveal>
<strong>Modal 1</strong> <br>
<p>A Computer Science portal for geeks.
It contains well written, well thought
and well explained computer science
and programming articles</p>
<button class="button"
data-open="modal2">
Reveal second modal
</button>
</div>
<!-- Second modal -->
<div class="reveal" id="modal2" data-reveal>
<h2>This is Modal 2</h2>
<img alt="GFG" src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png">
<br><br>
<button class="button"
data-open="modal3">
Reveal third modal
</button>
</div>
<!-- Third modal -->
<div class="reveal" id="modal3" data-reveal>
<h2>Modal 3</h2>
<p>This is modal 3</p>
<button class="button"
data-open="modal4">
Reveal fourth modal
</button>
</div>
<!-- Fourth modal -->
<div class="reveal" id="modal4" data-reveal>
<h2>This is Modal 4</h2>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210915115837/gfg3-300x300.png">
<button class="close-button"
data-close
type="button">
<span aria-hidden="true">
×
</span>
</button>
</div>
</center>
<script>
$(document).ready(function () {
$(document).foundation();
})
</script>
</body>
</html>
Producción:
Referencia: https://get.foundation/sites/docs/reveal.html#nested-modal
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