Magnific Popup es una caja de luz rápida, liviana, compatible con dispositivos móviles y receptiva y un complemento jQuery de diálogo modal. Se puede usar para abrir HTML en línea, contenido cargado con ajax, imagen, formulario, iframe (video de YouTube, Vimeo, Google Maps) y galería de fotos. Ha agregado efectos de animación usando transiciones CSS3.
Proceso de instalación: hay varias formas de comenzar a usar este complemento:
- Descarga la carpeta comprimida de la última versión de Magnific Popup desde aquí .
- Alternativamente, clone el Repositorio de Github en cualquier ubicación deseada ejecutando el siguiente comando en Git Bash.
git clone https://github.com/dimsemenov/Magnific-Popup.git
- Dado que Magnific es un complemento del marco jQuery, debe hacer referencia a la biblioteca jQuery. Esto se puede hacer usando la versión de jQuery alojada en Google o descargando y usando los archivos de distribución.
- Incluir CSS: agregue el archivo magnific-popup.css de la carpeta dist de Magnific.
<linkrel="stylesheet"type="text/css"href="path/magnific-popup.css">
- Incluya JavaScript: agregue el archivo jquery.magnific-popup.min.js de la carpeta dist de Magnific.
<scripttype="text/javascript"src="path/jquery.magnific-popup.min.js"></script>
Ejemplo 1: Este ejemplo muestra una ventana emergente usando el complemento.
html
<!DOCTYPE html>
<html>
<head>
<!-- Include CSS of Magnific Popup -->
<link rel="stylesheet" type="text/css"
href="css/magnific-popup.css">
</head>
<body style="text-align:center;">
<!-- Button to open popup -->
<button>
<a href="#popup-info" class="open-popup"
style="text-decoration: none;">
Click to Open PopUp
</a>
</button>
<!-- Popup to display -->
<div id="popup-info" class="mfp-hide" style=
"text-align:center;
background:white;height:600px;">
<h1 style="color: green;">
GEEKSFORGEEKS
</h1>
<div style="font-size: 15px;
font-weight: bold;">
WELCOME TO GEEKSFORGEEKS
</div>
</div>
<!-- Include jQuery -->
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<!-- Include the Magnific Popup JavaScript -->
<script type="text/javascript"
src="js/jquery.magnific-popup.min.js">
</script>
<script type="text/javascript">
$(document).ready(function ($) {
$('.open-popup').magnificPopup({
type: 'inline',
// Fixed position will be used
fixContentPos: true,
// Since disabled, Magnific Popup
// will not put close button
// inside content of popup
closeBtnInside: false,
preloader: false,
// Delay in milliseconds before
// popup is removed
removalDelay: 160,
// Class that is added to
// popup wrapper and background
mainClass: 'mfp-fade'
});
});
</script>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Ejemplo 2: este ejemplo muestra una ventana emergente con una imagen usando el complemento. El módulo de la galería nos permite cambiar el contenido de la ventana emergente y agrega flechas de navegación.
html
<!DOCTYPE html>
<html>
<head>
<!--Bootstrap CSS-->
<link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<!--Magnific Popup CSS-->
<link rel="stylesheet" type="text/css"
href="css/magnific-popup.css">
</head>
<body style="text-align:center;">
<h1 style="color: blue;">
:GALLERY:
</h1>
<!--Gallery-->
<div class="container ">
<div class="row no-gutters gallery"
style="padding:0;">
<!--Image 1-->
<div class="col-lg-6 col-md-6 col-sm-6 col-12">
<a href="images/gfg-logo.png">
<img src="images/gfg-logo.png"
style="height:300px; width:100%;">
</a>
</div>
<!--Image 2-->
<div class="col-lg-6 col-md-6 col-sm-6 col-12">
<a href="images/gfg-logo2.png">
<img src="images/gfg-logo2.png"
style="height:300px; width:100%;">
</a>
</div>
<!--Image 3-->
<div class="col-lg-6 col-md-6 col-sm-6 col-12">
<a href="images/gfg-promo.jpg">
<img src="images/gfg-promo.jpg"
style="height:300px; width:100%;">
</a>
</div>
<!--Image 4-->
<div class="col-lg-6 col-md-6 col-sm-6 col-12">
<a href="images/gfg-promo2.jpg">
<img src="images/gfg-promo2.jpg"
style="height:300px; width:100%;">
</a>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<script src=
"https://code.jquery.com/jquery-3.5.1.slim.min.js">
</script>
<script src=
"https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js">
</script>
<script src=
"https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js">
</script>
<!-- Magnific Popup JavaScript-->
<script type="text/javascript" src=
"js/jquery.magnific-popup.min.js">
</script>
<script type="text/javascript">
$(document).ready(function ($) {
$('.gallery').magnificPopup({
type: 'image',
// To invoke the popup
// using the 'a' tag
delegate: 'a',
// Enable the gallery
gallery: {
enabled: true
}
});
});
</script>
</body>
</html>
Producción:
-
Antes de hacer clic en una imagen:
-
Después de hacer clic en cualquier imagen:
Referencia: Documentación emergente de Magnific
Publicación traducida automáticamente
Artículo escrito por DishaSinha y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA