12

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?

Sparky
  • 98,165
  • 25
  • 199
  • 285
Mike
  • 2,716
  • 4
  • 26
  • 27
  • 1
    It works on that site link you gave, you got any code? – waqasahmed Sep 01 '09 at 18:06
  • 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

15 Answers15

23
   jQuery(".lightbox").fancybox({
        helpers     : {
            overlay : {
                speedIn  : 0,
                speedOut : 300,
                opacity  : 0.8,
                css      : {
                    cursor : 'default'
                },
                closeClick: false
            }
        },
    });
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
11
<script type="text/javascript">
  $(document).ready(function() {
    $("#your_link").fancybox({
      'hideOnOverlayClick':false,
      'hideOnContentClick':false
    });
  });
</script>                              
Andrei Sfat
  • 8,440
  • 5
  • 49
  • 69
cool_dev
  • 111
  • 1
  • 2
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>
justinw
  • 710
  • 8
  • 10
6

For this issue, please try this way

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

Hope this helps.

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
5

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.

Mudasser Mian
  • 53
  • 1
  • 5
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);
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
3

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

$("#fancybox-overlay").unbind();
Bo Persson
  • 90,663
  • 31
  • 146
  • 203
Gabriel
  • 31
  • 2
3

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 :)

Mihai Iorga
  • 39,330
  • 16
  • 106
  • 107
2

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.

random_user_name
  • 25,694
  • 7
  • 76
  • 115
atwede
  • 21
  • 2
2

Set the closeClick parameter to false inside your function:

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

    return false;
});
reformed
  • 4,505
  • 11
  • 62
  • 88
T.Todua
  • 53,146
  • 19
  • 236
  • 237
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");},
Chris
  • 8,527
  • 10
  • 34
  • 51
Raj Gohil
  • 11
  • 1
1

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

Kailas
  • 3,173
  • 5
  • 42
  • 52
0

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);
0

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>
Adi Inbar
  • 12,097
  • 13
  • 56
  • 69
Parul
  • 1
-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;