1

I want to create a form using fancybox2. When needed the fancybox2 form will be displayed and can only be closed using the top right X button, escape key or with a submit,cancel buttons I will add inside this content. How can I achieve this and how can I make all the stuff in the background disabled so no one can click it ? it seems that it doesn't work for me in the next example:

jQuery(document).ready(function(){
    $(".fancybox").fancybox({

        width:600,
        height: 300,
        closeBtn    : true,
        closeClick  : true,
        openEffect  : 'elastic',
        closeEffect : 'elastic',
        scrolling   : 'no',
        autoSize    : false,
        fitToView   :   true

    });
});

        <div class='fancybox' style="display: block;width:600px;height:300px;border:1px solid black;position: absolute;left:300px;top:300px;">TEST DIV</div>
JFK
  • 40,963
  • 31
  • 133
  • 306
Alon
  • 3,734
  • 10
  • 45
  • 64

2 Answers2

1
$(".fancybox").fancybox({
    width: 600,
    height: 300,
    closeBtn    : true,
    closeClick  : false, // prevents closing when clicking the background 
    openEffect  : 'elastic',
    closeEffect : 'elastic',
    scrolling   : 'no',
    autoSize    : false,
    fitToView   : true
});

change closeClickto false

Luis
  • 1,067
  • 1
  • 14
  • 25
  • `closeClick:false` only prevents closing when clicking INSIDE fancybox. Clicking outside fancybox (on the overlay mask/background) still closes fancybox. I answered that question already back in December http://stackoverflow.com/a/8404587/1055987 – JFK Aug 16 '12 at 22:02
0

Set the modal option to true in facnybox script code i.e.

$(".fancybox").fancybox({
    //existing stuff
    modal : true

});
Kundan Singh Chouhan
  • 13,952
  • 4
  • 27
  • 32
  • Beware that when using the `modal` option, the [X] button will not show up and `escape` won't close the box either. The only way to close the box will be through a custom close button triggering the `$.fancybox.close()` method. – JFK Aug 16 '12 at 18:17