How to use the Magnific Popup jQuery plugin?

Last Updated : 14 Jul, 2020

Magnific Popup is a fast, light, mobile-friendly and responsive lightbox and modal dialog jQuery plugin. It can be used to open inline HTML, ajax loaded content, image, form, iframe (YouTube video, Vimeo, Google Maps), and photo gallery. It has added animation effects using CSS3 transitions.

Installation Process: There are several ways to start using this plugin:

Download the zipped folder of the latest version of Magnific Popup from here.
Alternatively, clone the Github Repository to any desired location by executing the following command in the Git Bash.
```
git clone https://github.com/dimsemenov/Magnific-Popup.git
```

Since the Magnific is a plugin of the jQuery framework, it needs to reference the jQuery library. This can be done by using the Google-hosted version of jQuery or downloading and using the distribution files.
Include CSS: Add the magnific-popup.css file from the dist folder of Magnific.
<link rel="stylesheet" type="text/css" href="path/magnific-popup.css">

Include JavaScript: Add the jquery.magnific-popup.min.js file from the dist folder of Magnific.
<script type="text/javascript" src="path/jquery.magnific-popup.min.js"></script>

Example 1: This example shows a popup using the plugin.

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> 

Output:

Before clicking the button:

Before clicking button

After clicking the button:

After clicking on button

Example 2: This example shows a popup with an image using the plugin. The gallery module allows us to switch the content of the popup and adds navigation arrows.

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> 