jquery fancybox - prevent close on click outside of fancybox

Question

I'm using the Fancybox plugin for my modal windows. It seems like no matter what options I use I can't prevent the fancybox modal window from closing when the user clicks outside of the fancybox modal window (grayed out area).

Is there a way to force the user to click the X or a button that I trigger the close event? This seems like it should be simple so I'm hoping I'm just reading the examples wrong.

I've tried hideOnContentClick: false but that doesn't seem to be working for me. Any ideas?

Right, but on all of the examples if you click outside of the modal window it closes. I want it to remain open unless the user clicks the X (no where else). — Mike, Sep 01 '09 at 18:08

score 23 · Answer 1 · answered May 28 '12 at 13:12

23

   jQuery(".lightbox").fancybox({
        helpers     : {
            overlay : {
                speedIn  : 0,
                speedOut : 300,
                opacity  : 0.8,
                css      : {
                    cursor : 'default'
                },
                closeClick: false
            }
        },
    });

answered May 28 '12 at 13:12

user1421770

239
2
2

2

this doesn't actually answers the original question, which uses fancybox v1.2.1. For versions between v1.2.6 and v1.3.4 see @cool_dev's answer. For fancybox 2.x see http://stackoverflow.com/a/8404587/1055987 – JFK Oct 24 '13 at 17:16

score 11 · Answer 2 · edited Jun 17 '11 at 18:06

11

<script type="text/javascript">
  $(document).ready(function() {
    $("#your_link").fancybox({
      'hideOnOverlayClick':false,
      'hideOnContentClick':false
    });
  });
</script>

edited Jun 17 '11 at 18:06

Andrei Sfat

8,440
5
49
69

answered Jun 17 '11 at 10:32

cool_dev

111
1
2

score 7 · Answer 3 · answered Jun 16 '10 at 13:26

7

I'm using fancybox 1.3.1, if you wanna force the user to close the modal box ONLY by clicking on the button, you can specify in the configuration:

<script type="text/javascript">
  $(document).ready(function() {
    $("#your_link").fancybox({
      'hideOnOverlayClick':false,
      'hideOnContentClick':false
    });
  });
</script>

answered Jun 16 '10 at 13:26

justinw

710
8
10

Thanks a lot! Worked using fancybox 1.3.4 – Rafael Merlin Jul 14 '15 at 20:18

score 6 · Answer 4 · answered Oct 22 '14 at 06:37

6

For this issue, please try this way

$("YourElement").fancybox({
 helpers: {
        overlay: { closeClick: false } //Disable click outside event
    }

Hope this helps.

answered Oct 22 '14 at 06:37

Binh LE

387
5
17

this doesn't actually answers the original question, which uses fancybox v1.2.1. For versions between v1.2.6 and v1.3.4 see @cool_dev's answer. For fancybox 2.x see http://stackoverflow.com/a/8404587/1055987 – JFK Nov 18 '14 at 03:38
@JKF: Thanks I will improved my knowledge – Binh LE Nov 27 '14 at 07:30

score 5 · Answer 5 · answered Nov 08 '12 at 09:23

If you are using Fancybox 1.2.6 (like I am on a project), I found out the option hideOnOverlayClick. You can set it to false (e.g. hideOnOverlayClick: false).

I found this option while exploring to modify the code based on the suggestion givn by Scott Dowding.

score 4 · Accepted Answer · answered Sep 01 '09 at 18:42

4

There is no option for that. You will have to change the source code.

In jquery.fancybox-1.2.1.js you need to comment out (or delete) line 341 in the _finish method:

//$("#fancy_overlay, #fancy_close").bind("click", $.fn.fancybox.close);

answered Sep 01 '09 at 18:42

Scott Dowding

13,749
1
16
10

Excellent. I commented the line out and added: $("#fancy_close).bind("click", $.fn.fancybox.close); This does exactly what I need. Thanks! – Mike Sep 01 '09 at 19:21
1

there is an option as in cool_dev answer below, editing the code will lead to problems when you need to update, your changes will be over-written – Starjumper Tech SL Jul 13 '12 at 14:47
how did you read the file . there is a method to convert minified Js ? – Abdennour TOUMI Jan 08 '14 at 09:50

score 3 · Answer 7 · edited Apr 07 '12 at 02:47

3

I ran into the same "issue". This worked for me:

$("#fancybox-overlay").unbind();

edited Apr 07 '12 at 02:47

Bo Persson

90,663
31
146
203

answered Apr 06 '12 at 10:51

Gabriel

31
2

1

for version 2.1.4 they can change this to $(".fancybox-overlay").unbind(); – loQ May 20 '13 at 15:19

score 3 · Answer 8 · edited Sep 25 '12 at 12:39

none of the above worked for me, so i just wrote a simple bit for latest version of fancybox.

function load(parameters) {
    $('.fancybox-outer').after('<a href="javascript:;" onclick="javascript:{parent.$.fancybox.close();}" class="fancybox-item fancybox-close" title="Close"></a>');
}

$(document).ready(function () {
    $(".various").fancybox({ 
        modal: true,
        afterLoad: load
    });
});

Hope this helps :)

score 2 · Answer 9 · edited Sep 22 '12 at 20:58

The $("#fancybox-overlay").unbind() solution given for this question by @Gabriel works except I needed to bind it to the fancybox after it loads its content, and I couldn't unbind immediately. For anyone who runs into this issue, the following code solved the problem for me:

$('.fancybox').fancybox({'afterLoad' : function() {
    setTimeout(function() { $("#fancybox-overlay").unbind(); }, 400);}
});

The 400ms delay got it working for me. It worked with 300ms but I didn't want to take chances.

score 2 · Answer 10 · edited Mar 23 '17 at 20:44

2

Set the closeClick parameter to false inside your function:

$(".video").click(function() {
    $.fancybox({
        width: 640,
        height: 385,
        helpers: { 
            overlay: {
                closeClick: false
            }
        }
    });

    return false;
});

edited Mar 23 '17 at 20:44

reformed

4,505
11
62
88

answered Nov 05 '13 at 23:20

T.Todua

53,146
19
236
237

2

please don't shout, especially not in **Bold** :-) – kleopatra Nov 05 '13 at 23:29

score 1 · Answer 11 · edited Sep 11 '13 at 20:31

1

Just add following line to your function, you do not have to change anything in jquery.fancybox-1.2.6.js

callbackOnStart : function() {$("#fancy_overlay").bind("click","null");},

edited Sep 11 '13 at 20:31

Chris

8,527
10
34
51

answered Dec 22 '09 at 16:24

Raj Gohil

11
1

We only wanted this behavior on one of our fancy boxes so changing the source wasn't an option, Thanks! – spilliton Jan 20 '10 at 20:09
Just discovered that this doesn't work on Google Chrome, haven't figured out why yet. – spilliton Feb 02 '10 at 21:59

score 1 · Answer 12 · answered Jan 15 '14 at 13:17

you can prevent the fancy box to close by applying these setting

 'showCloseButton'=>false, // hide close button from fancybox
 'hideOnOverlayClick'=>false, // outside of fancybox click disabled
 'enableEscapeButton'=>false, // disable close on escape key press

get the fancybox setting from following link

http://www.fancybox.net/api

score 0 · Answer 13 · answered Apr 02 '13 at 21:48

I had to use a combination of all of the above answers, as all of them include errors. Certainly, no editing of the source code is necessary.

In my case, I wanted to disable overlay clicks closing the box as I had a progression of questions that would be displayed sequentially inside the fancybox, so I didn't want users to lose their progress by accidentally clicking on the overlay, but wanted to keep that functionality elsewhere on the page.

Use this to disable it:

$(".fancybox-overlay").unbind();

Use this to re-enable it:

$(".fancybox-overlay").bind("click", $.fancybox.close);

score 0 · Answer 14 · edited Oct 16 '13 at 07:56

Just use the following code:

$(document).ready(function() {
  $("a#Mypopup").fancybox({
        "hideOnOverlayClick" : false, // prevents closing clicking OUTSIE fancybox
        "hideOnContentClick" : false, // prevents closing clicking INSIDE fancybox
        "enableEscapeButton" : false  // prevents closing pressing ESCAPE key
  });
  $("a#Mypopup").trigger('click');
});

<a id="Mypopup" href="images/popup.png"><img alt="Mypopup" src="images/popup.png" /></a>

score -1 · Answer 15 · answered Nov 17 '14 at 16:51

-1

You can set the default closeClick on the overlay to false. Has worked for me in version 2.1.5.

$.fancybox.helpers.overlay.defaults.closeClick=false;

answered Nov 17 '14 at 16:51

Muller Digital

56
2

jquery fancybox - prevent close on click outside of fancybox

15 Answers15

Linked