magnific-popup.min.js 是一个响应式弹出层和对话框插件-BFW插件库

magnific-popup.min.js 是一个响应式弹出层和对话框插件

magnificPopup方法的选项设置
mainClass： String类型，要添加到根元素上的样式类。默认是空字符串。
closeOnContentClick： Boolean类型，默认false，点击内容区域关闭弹出层。
closeOnBgClick： Boolean类型，默认true，点击背景区域关闭弹出层。
closeBtnInside： Boolean类型，默认true，是否有内置的关闭按钮。
modal： Boolean类型，默认false，是否是模态对话框。
常用的其他api
关闭图层close方法： $.fn.magnificPopup('close');
打开弹出层open方法：$.fn.magnificPopup('open')
下一个图片next方法： $('.element-with-popup').magnificPopup('next');

第一步引入bfwone

第二步use插件与css

示例如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>
    <script id="bfwone" data="dep=jquery.17&err=0" type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
    <style>
        .gallery img {
            width: 100px;
        }
    </style>
    <script type="text/javascript">
        bready(function() {
            use(["jquery.magnific-popup.min", "magnific-popup"], function() {

                //第一种方式打开
                $('.test-popup-link').magnificPopup({
                    type: 'image',
                    closeBtnInside: true, // 显示关闭按钮
                    closeOnBgClick: false  // 点击遮罩透明背景关闭弹出层
                    // other options
                });
                // 第二种方式
                $('.gallery').each(function() {
                    $(this).magnificPopup({
                        delegate: 'a', // the selector for gallery item
                        type: 'image',
                        gallery: {
                            enabled: true
                        }
                    });
                });
                //第三种方式
                $('#open-popup').magnificPopup({
                    items: [{
                        src: 'http://repo.bfw.wiki/bfwrepo/image/slicebox/4.jpg',
                        title: '标题'
                    },
                        {
                            src: 'http://bfw.wiki',
                            type: 'iframe' // this overrides default type
                        },
                        {
                            src: $('<div class="white-popup">动态创建的元素</div>'), // Dynamically created element
                            type: 'inline'
                        },
                        {
                            src: '<div class="white-popup">Popup from HTML string</div>', // HTML string
                            type: 'inline'
                        },
                        {
                            src: '#mypopup', // CSS selector of an element on page that should be used as a popup
                            type: 'inline'
                        }],
                    gallery: {
                        enabled: true
                    },
                    type: 'image' // this is a default type
                });

            });
        });
    </script>
</head>
<body>



    <!--第一种方式-->
    <a class="test-popup-link" href="http://repo.bfw.wiki/bfwrepo/image/slicebox/1.jpg">第一种方式</a>
    <!--第二种方式-->

    <div class="gallery">
        <a href="//repo.bfw.wiki/bfwrepo/image/slicebox/4.jpg"><img src="http://repo.bfw.wiki/bfwrepo/image/slicebox/4.jpg"></a>
        <a href="//repo.bfw.wiki/bfwrepo/image/slicebox/2.jpg"><img src="http://repo.bfw.wiki/bfwrepo/image/slicebox/2.jpg"></a>
        <a href="//repo.bfw.wiki/bfwrepo/image/slicebox/2.jpg"><img src="http://repo.bfw.wiki/bfwrepo/image/slicebox/2.jpg"></a>
        <a href="//repo.bfw.wiki/bfwrepo/image/slicebox/2.jpg"><img src="http://repo.bfw.wiki/bfwrepo/image/slicebox/2.jpg"></a>
        <a href="//repo.bfw.wiki/bfwrepo/image/slicebox/2.jpg"><img src="http://repo.bfw.wiki/bfwrepo/image/slicebox/2.jpg"></a>
        <a href="//repo.bfw.wiki/bfwrepo/image/slicebox/4.jpg"><img src="http://repo.bfw.wiki/bfwrepo/image/slicebox/4.jpg"></a>
        <a href="//repo.bfw.wiki/bfwrepo/image/slicebox/2.jpg"><img src="http://repo.bfw.wiki/bfwrepo/image/slicebox/4.jpg"></a>

    </div>

    <!--第三种方式-->
    <div id="open-popup">
        第三种方式
    </div>
    <div id="mypopup">
        页面元素
    </div>



</body>
</html>

官网 http://dimsemenov.com/plugins/magnific-popup/