CODEWITHSUNDEEP
javascripthtmlcssmagnific-popup
MickeyNotD
MickeyNotD

Reputation: 21

CLose Button doesn't appear on magnific-popup

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.

Upvotes: 2

Views: 8475

Answers (4)

Atanas Atanasov
Atanas Atanasov

Reputation: 546

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...

Upvotes: 0

davykiash
davykiash

Reputation: 1804

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;          
}

Upvotes: 1

itsmikem
itsmikem

Reputation: 2168

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
}

Upvotes: 0

Matthew King
Matthew King

Reputation: 1362

Here is a working example: https://jsfiddle.net/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
});

Upvotes: 1

Related Questions