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>

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>

• javascript
• jquery
• html
• fancybox
• fancybox-2

4 Answers 4

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.

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

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

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./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare./ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare./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>