This should be simple .... However....

I've tried almost everything to get the Close (X) Button to appear on the magnific popup. But it doesn't happen. There's no escape from the popup page except for the Back option. Here's what I've got:

.white-popup {
position: relative;
background: #FFF;
padding: 20px;
width: auto;
max-width: 500px;
margin: 20px auto;
}

and

<div class="popup-modal"> 
                    <a href="img/paintings/full/ink-couple-tree-dancing_full.jpg"><img src="img/paintings/acrylic-trulkhor-1.png"></a>
                </div>

                <div id="test-modal" class="mfp-hide white-popup">

                <p><button class="closePopup">Close</button></p>

                </div>

                <script type="text/javascript">

                    $('.popup-modal').magnificPopup({

                    type: 'inline',
                    modal: false,

                    });

                    $(document).on('click', '.closePopup', function (e) 
                {
                    e.preventDefault();
                    $.magnificPopup.close();
                });


                </script>

            </div>

Any ideas? Thanks.

This should be simple .... However....

I've tried almost everything to get the Close (X) Button to appear on the magnific popup. But it doesn't happen. There's no escape from the popup page except for the Back option. Here's what I've got:

.white-popup {
position: relative;
background: #FFF;
padding: 20px;
width: auto;
max-width: 500px;
margin: 20px auto;
}

and

<div class="popup-modal"> 
                    <a href="img/paintings/full/ink-couple-tree-dancing_full.jpg"><img src="img/paintings/acrylic-trulkhor-1.png"></a>
                </div>

                <div id="test-modal" class="mfp-hide white-popup">

                <p><button class="closePopup">Close</button></p>

                </div>

                <script type="text/javascript">

                    $('.popup-modal').magnificPopup({

                    type: 'inline',
                    modal: false,

                    });

                    $(document).on('click', '.closePopup', function (e) 
                {
                    e.preventDefault();
                    $.magnificPopup.close();
                });


                </script>

            </div>

Any ideas? Thanks.

• javascript
• html
• css
• magnific-popup

Share Improve this question Follow edited Jul 5, 2015 at 2:10 m4n0 32.4k2828 gold badges8181 silver badges9696 bronze badges asked Jul 5, 2015 at 2:07 MickeyNotDMickeyNotD 2111 silver badge22 bronze badges 1

• Can you setup a demo of the code here: JSfiddle? – m4n0 Commented Jul 5, 2015 at 2:11

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 1

Here is a working example: https://jsfiddle/0rd5dc3v/2/

There are a few things I changed:

// Change the html link to the popup id, not the image url    
<div class="popup-modal"> 
    <a class="popup-modal-link" href="#test-modal"><img src="img/paintings/acrylic-trulkhor-1.png"></a>
</div>

// Call magnificPopup on the <a> element, not the outer div
$('.popup-modal-link').magnificPopup({
    type: 'inline',
    // Hide the builtin close button so we can use a custom close button
    showCloseBtn: false
});

The button is white in color by default. To make it visible set its CSS property to black or any color that is visible on a white background.

.mfp-close {            
    color : black;          
}

A simple workaround is to include the closeMarkup property in the object you init Magnific Popup with, and adding in a custom class to that markup.

Then, add that named custom class from your markup to your CSS with display set to something other than 'none', and marked !important.

Within the Magnific Popus JS:

closeMarkup:"<button title='%title%' type='button' class='mfp-close myDisplayOverride'>&#215;</button>"

CSS:

.myDisplayOverride{
  display:block !important
}

5 years late to the party!

I had the same issue as you did: when inline was set to true, the close button was not there.

You need to add the closeBtnInside: true configuration option in order to make the button visible.

So in your case:

$('.popup-modal').magnificPopup({
  type: 'inline',
  modal: false,
  closeBtnInside: true
});

Just keep in mind that if you have custom markup for you close button, you need to add a tiny bit of CSS magic to make it work on click.

My custom button markup looks like this:

closeMarkup: '<button type="button" class="mfp-close"><i class="far fa-times"></i></button>'

And when you click on the <i class="far"> element, nothing happens. So you need to add

.mfp-close i {
  pointer-events: none;
}

because magnificPopup has the click handler bound to the button element but not its children...