prevent close on click outside of fancybox

[berlin1525]

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?

[xmkatx]

I'm hoping someone has a solution to this, too! I'm trying to work on
this as well...

On Sep 1, 2:26 pm, berlin1525 <berlin1...@gmail.com> wrote:
> It seems like no matter what options I use I can'tpreventthefancyboxmodal window fromclosingwhen the user clicksoutsideof thefancyboxmodal window (grayed out area).

[xmkatx]

Never mind, I got it.

[JFK]

isn't it funny when people say in a forum that they have a solution of
a problem but they don't share it?... after all, a forum is a place
where we expect to help each other.

@berlin1525
the area outside of fancybox is called "fancy_overlay"; in order to
prevent fancybox closing when you click on this area (outside the
fancybox) just add to your script:
'callbackOnStart': function() {
$("#fancy_overlay").bind("click", "null");
}
to override the default script value.

a full example:

<script type="text/javascript">
$(document).ready(function() {
//Activate FancyBox
$("a#fancylink").fancybox({
'hideOnContentClick': false,
'frameWidth':425,
'frameHeight':344,
'callbackOnStart': function() {
$("#fancy_overlay").bind("click", "null");
}
});
});
</script>

btw, hideOnContentClick prevents closing fancybox when clicking INSIDE
fancybox, not outside.

[alex_mc]

OK, that script is working

> <script type="text/javascript">
> $(document).ready(function() {
>   //Activate FancyBox
>   $("a#fancylink").fancybox({
>   'hideOnContentClick': false,
>   'frameWidth':425,
>   'frameHeight':344,
>   'callbackOnStart': function() {
>     $("#fancy_overlay").bind("click", "null");
>     }
>   });});
>
> </script>

But I have javascript error

Details:

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/
4.0; GTB6; Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1;
SV1) ; .NET CLR 1.1.4322; .NET CLR 2.0.50727; .NET CLR 3.0.04506.30)
Timestamp: Thu, 24 Sep 2009 11:27:22 UTC

Message: Object doesn't support this property or method
Line: 19
Char: 15990
Code: 0
URI: http://www.n-shopper.net/wp-includes/js/jquery/jquery.js?ver=1.3.2

Once again - it's working but with that error on IE 8

[xmkatx]

Thanks, JFK, I'm new to Jquery and not used to all the functions.

My solution was to comment out the line in the source code:
$("#fancy_overlay, #fancy_close").bind("click", $.fn.fancybox.close);

It wasn't working but that was on my end because I had a extra
javascript file interfering with it.
I just took it out and now it works.

[JF Diaz]

@alex_mc
your script error doesn't seem to be related to fancybox

it may sound silly but have you tried to link jquery just as
http://www.n-shopper.net/wp-includes/js/jquery/jquery.js (without the ?trial)

[_EchiZeN_]

Yosh !!!

after tests, it works for me :
for FF 3 & IE 8 :

$('a#fancylink').fancybox(
{ 'hideOnContentClick': false,

'overlayShow': true,
'overlayOpacity': 0.8,
'zoomOpacity': false,
'frameWidth':600,
'frameHeight':550,
'centerOnScroll':true,

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

}
}
);

But i did not understand why it didnt not work for Chrome 3, So, I
tried many things, and the solution which worked for me is :

var userAgent = navigator.userAgent.toLowerCase();
if(/chrome/.test( userAgent ))
{
$("#fancy_overlay").click(
function()
{
$("#fancy_overlay").css('opacity', 0.8).show();
$("#fancy_overlay").unbind("click", $.fn.fancybox.close);
return null;
}
);
}

et Voilà
tchuss !!

[_EchiZeN_]

After 2 hours of work :-|