极客教程如何使用Magnific Popup jQuery插件
Magnific Popup是一个快速，轻便，移动友好和响应的灯箱和模态对话框jQuery插件。它可以用来打开内联HTML，ajax加载的内容，图像，表格，iframe（YouTube视频，Vimeo，谷歌地图）和照片库。它增加了使用CSS3过渡的动画效果。
安装过程：有几种方法可以开始使用这个插件。
- 从这里下载最新版本的Magnific Popup的压缩文件夹。
- 或者，通过在Git Bash中执行以下命令，将Github仓库克隆到任何需要的位置。
git clone https://github.com/dimsemenov/Magnific-Popup.git
- 由于Magnific是jQuery框架的一个插件，它需要引用jQuery库。这可以通过使用谷歌托管的jQuery版本或下载并使用分发文件来完成。
- 列入CSS。添加Magnific的dist文件夹中的magnific-popup.css文件。
<link rel="stylesheet" type="text/css" href="path/magnific-popup.css">
- 列入JavaScript。在Magnific的dist文件夹中添加jquery.magnific-popup.min.js文件。
<script type="text/javascript" src="path/jquery.magnific-popup.min.js"></script>
例子1：这个例子显示了一个使用该插件的弹出窗口。
<!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>
输出:
- 在点击按钮之前。
- 点击该按钮后。
例子2：这个例子显示了一个使用插件的图片弹出窗口。画廊模块允许我们切换弹出窗口的内容，并添加了导航箭头。
<!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>
输出:
- 在点击一个图像之前。
- 在点击任何图片后。
