CODEWITHSUNDEEP
javascriptjqueryhtmlfancyboxfancybox-2
Greg
Greg

Reputation: 3063

Fancybox popup close button not showing

any idea why the close button is not appearing in my newsletter popup box?

Many thanks

  <script type="text/javascript">
function openFancybox() {
    setTimeout(function () {
        $.fancybox('#newsletterpopup', {
            modal: true, // this prevents fancybox to close unless close unless ".non-merci" is clicked
            showCloseButton: true,
            helpers: {
                overlay: {
                    css: {
                        'background': 'rgba(58, 42, 45, 0.3)'
                    }
                }
            },
            afterShow: function () {
                // enables a way to close fancybox
                $(".non-merci").on("click", function () {
                    $.fancybox.close()
                });
            }
        });
    }, 1000);
};
$(document).ready(function () {
    var visited = $.cookie('visited');
    if (visited == 'yes') {
        return false;
    } else {
        openFancybox();
    }
    $.cookie('visited', 'yes', {
        expires: 0.0001
    });
});
</script>

Upvotes: 1

Views: 13164

Answers (4)

Alex Ljamin
Alex Ljamin

Reputation: 767

Based on the latest modal example from Fancybox you can add the the close button to the DOM along with modal: true.

$('#newsletterpopup').fancybox({
    modal: true,
    helpers: {
        overlay: {
            css: {
                'background': 'rgba(58, 42, 45, 0.3)'
            }
        }
    },
});
#trueModal{
  display: none
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js"></script>

<a data-fancybox="" data-src="#trueModal" data-modal="true" href="javascript:;">Open modal</a>

<div id="trueModal">
  <div>Your content</div>
  <button data-fancybox-close>Close modal</button>
</div>

Upvotes: 0

Kimberly Lin
Kimberly Lin

Reputation: 1

It depends on what tools you are using. I use gulp and I noticed that the file (fancybox_sprite.png) is there, but the path can be wrong, especially if you are using gulp to compile for you. Sometimes they can get misplaced. Either host the image in the cloud or correct the path to the file.

Hope this helps. Also if you want to confirm that you actually have the correct config, you can use inspector to check if there's .fancybox-close class. If it's there, then this means your path is not pointing to the png file.

Upvotes: 0

Akuma
Akuma

Reputation: 583

Try to use:

closeBtn:'<a title="Close" class="fancybox-item fancybox-close" href="javascript:;"></a>' instead of showCloseButton.

And try to use jQuery version 1.8 or lower instead of 1.10

Upvotes: 0

JFK
JFK

Reputation: 41143

When you set

modal: true

close button will NEVER show up, regardless closeBtn is set to true.

You either remove the modal option (which default is false) or set it to false

Notice that showCloseButton is an option for fancybox v1.3.x.

Upvotes: 3

Related Questions