Magnific Popup

Magnific Popup is a responsive lightbox & dialog script with focus on performance and providing best experience for user with any device

Official documentation

For more detailed information and examples, see the official documentation: Magnific popup .

How to use? #

Copy-paste the stylesheets <link> into your <head> to load the CSS.

<link rel="stylesheet" href="vendors/magnific-popup/magnific-popup.css">

Copy-paste the following <script> near the end of your pages under JS Implementing Plugins to enable it.

<script src="vendors/magnific-popup/jquery.magnific-popup.js"></script>

Open popup

<div class="bg-gray-02 p-3">
    <a href="#sample-popup" data-gtf-mfp="true"
       data-mfp-options='{"type":"inline"}'>Open popup</a>
    <div id="sample-popup" class="mfp-popup mfp-with-anim mfp-hide">
        <h2>This is sample popup</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
            Quos, unde.</p>
        <p>Culpa eum fugiat nulla, quas recusandae velit? Optio,
            pariatur, veniam!</p>
        <p>Ad culpa optio quidem ratione! Animi dignissimos dolorum
            quibusdam repudiandae.</p>
    </div>
</div>

Image gallery #

Result
HTML

<a href="../images/shop/full-top-place-1.jpg" data-gtf-mfp="true"
   data-gallery-id="01">
    <div class="box">
        <img src="../images/shop/top-place-1.jpg" alt="Image 01">
    </div>
</a>

JavaScript behavior #

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-mfp-options. Example: data-mfp-options='{"type":"inline"}'

Attributes	Description
`disableOn`	Default `null`. If window width is less than the number in this option lightbox will not be opened and the default behavior of the element will be triggered. Set to 0 to disable behavior. Option works only when you initialize Magnific Popup from DOM element. Can also accept Function as a parameter, which should return true if lightbox can be opened and false otherwise.
`key`	Default `null`. “Key” option is a unique identifier of a single or a group of popups with the same structure. If you will not define it, DOM elements will be created and destroyed each time when you open and close popup. You may (and should) set an equal key to different popups if their markup matches. By markup I mean options that change HTML structure of the popup (e.g. close icon placement and HTML code of it). For example: you have many popups that show title, some text and button - you may use one key for all of them, so only one instance of this element is created. Same for popup that always contains image and caption.
`midClick`	Default `false`. If set to true lightbox is opened if the user clicked on the middle mouse button, or click with Command/Ctrl key. Option works only when you initialize Magnific Popup from DOM element.
`mainClass`	Default `empty`. String that contains classes that will be added to the root element of popup wrapper and to dark overlay. For example `"myClass"`, can also contain multiple classes - `'myClassOne myClassTwo'`.
`preloader`	Default `true`. Preloader in Magnific Popup is used as an indicator of current status. If option enabled, it’s always present in DOM only text inside of it changes.
`focus`	Default `empty`. String with CSS selector of an element inside popup that should be focused. Ideally it should be the first element of popup that can be focused. For example `'input'` or `'#login-input'`. Leave empty to focus the popup itself.
`closeOnContentClick`	Default `false`. Close popup when user clicks on content of it. It’s recommended to enable this option when you have only image in popup.
`closeOnBgClick`	Default `true`. Close the popup when user clicks on the dark overlay.
`closeBtnInside`	Default `true`. If enabled, Magnific Popup will put close button inside content of popup, and wrapper will get class `mfp-close-btn-in` (which in default CSS file makes color of it change). If markup of popup item is defined element with class `mfp-close` it will be replaced with this button, otherwise close button will be appended directly.
`showCloseBtn`	Default `true`. Controls whether the close button will be displayed or not.
`enableEscapeKey`	Default `true`. Controls whether pressing the escape key will dismiss the active popup or not.
`modal`	Default `false`. When set to `true`, the popup will have a modal-like behavior: it won’t be possible to dismiss it by usual means (close button, escape key, or clicking in the overlay). This is a shortcut to set`closeOnContentClick`, `closeOnBgClick`, `showCloseBtn`, and `enableEscapeKey` to `false`.
`alignTop`	Default `false`. If set to `true` popup is aligned to top instead of to center. (basically all this option does is adds `mfp-align-top` CSS class to popup which removes styles that align popup to center).
`index`	Default `null`. Used for gallery. Defines starting index. If popup is initialised from DOM element, this option will be ignored.
`fixedContentPos`	Default `auto`. Popup content position. Can be `"auto"`, `true` or `false`. If set to `true` - fixed position will be used, to`false` - absolute position based on current scroll. If set to `"auto"` popup will automatically disable this option when browser doesn’t support fixed position properly.
`fixedBgPos`	Default `auto`. Same as an option above, but it defines position property of the dark transluscent overlay. If set to `false` - huge tall overlay will be generated that equals height of window to emulate fixed position. It’s recommended to set this option to `true` if you animate this dark overlay and content is most likely will not be zoomed, as size of it will be much smaller.
`overflowY`	Default `auto`. Defines scrollbar of the popup, works as `overflow-y`CSS property - any CSS acceptable value is allowed (e.g. `auto`, `scroll`, `hidden`). Option is applied only when fixed position is enabled. There is no option `overflowX`, but you may easily emulate it just via CSS.
`closeMarkup`	Default `<button title="%title%" type="button" class="mfp-close">×</button>`. Markup of close button. %title% will be replaced with option `tClose`.
`prependTo`	Default `document.body`. The DOM element to which popup will be added. Useful when you’re using ASP.NET where popup should be inside `form`. Option available since 2013/12/04.
`autoFocusLast`	Default `true`. If set to `true` last focused element before popup showup will be focused after popup close. Option available since 2015/12/16.

Previous Google map

Next Range slider

How to use? Basic example Image gallery JavaScript behavior