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. Revelares la ventana modal o emergente que se utiliza para mostrar información cuando hacemos clic en el botón. Podemos mostrar el contenido en la ventana emergente sin navegar a otra página. Revelar pantalla completa se usa para mostrar el modal en pantalla completa usando la clase .full . En este artículo, discutiremos Reveal Full-screen en Foundation CSS.
Foundation CSS Reveal Clase de pantalla completa:
- full: esta clase se utiliza para crear el modal de pantalla completa.
Sintaxis:
<div class="full reveal" data-reveal>
...
</div>
Ejemplo 1: el siguiente código muestra Foundation CSS Reveal Full-screen 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 Full-screen</h3>
<div class="full reveal" id="fullreveal" data-reveal>
<strong>GeeksforGeeks</strong>
<p>
A Computer Science portal for geeks.
It contains well written, well thought
and well explained computer science and
programming articles
</p>
<button class="close-button"
data-close
aria-label="Close"
type="button">
<span aria-hidden="true">×</span>
</button>
</div>
<button class="button" data-open="fullreveal">
Reveal
</button>
</center>
<script>
$(document).ready(function () {
$(document).foundation();
})
</script>
</body>
</html>
Producción:
Ejemplo 2: El siguiente código muestra Foundation CSS Reveal Full-screen con una imagen y 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 Full-screen</h3>
<div class="full reveal" id="fullreveal" data-reveal>
<strong>GeeksforGeeks</strong>
<p>
A Computer Science portal for geeks.
</p>
<img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png">
<button class="close-button"
data-close
aria-label="Close"
type="button">
<span aria-hidden="true">×</span>
</button>
</div>
<button class="button" data-open="fullreveal">
Reveal
</button>
</center>
<script>
$(document).ready(function () {
$(document).foundation();
})
</script>
</body>
</html>
Producción:
Referencia: https://get.foundation/sites/docs/reveal.html#full-screen
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