Change the title helper's type setting to be over.

$('.fancybox').fancybox({
  helpers: {
    title: {
      type: 'over'
    }
  }
});

The type setting for the title can also be float, inside, and over. The default option is float. You can change the type setting to be whichever you prefer; I would recommend trying all of them and seeing which one you like best. You can also turn off the title by setting the title setting to null:

$('.fancybox').fancybox({
  helpers: {
    title: null
  }
});

Change the overlay helper's closeClick setting to false.

The closeClick setting allows the user to click the overlay to close the Fancybox pop up when it is set to true. If it is set to false, clicking on the overlay does nothing.

Change the speedOut setting to 1000.

The speedOut setting determines how quickly the overlay should disappear. The number provided is the time in milliseconds that the animation will take, so in our case the overlay will disappear in one second (1000 milliseconds).

Change the showEarly setting to be false.

The showEarly setting will display the overlay immediately if it is set to true. If it is set to false, the overlay will only show once the content is loaded in the Fancybox pop up.

Change the locked setting to false.

The locked setting will prevent the content from showing a scrollbar when displaying a Fancybox pop up. I would recommend leaving this set to true at all times, so that the user cannot scroll while Fancybox is displaying. Allowing the user to scroll while Fancybox is displaying could result in the user not seeing the Fancybox pop up at all.

With all of these settings applied, our call to Fancybox looks like the following code:

$('.fancybox').fancybox({
  helpers: {
    overlay: {
      closeClick: false,
      speedOut: 1000,
      showEarly: false,
      locked: false
    }
  }
});

And now we have a Fancybox pop that cannot be clicked on to close the overlay, takes one second to animate back to being hidden, does not show the overlay until the content finishes loading, and does not lock the window size to the overlay area.

It is also possible to turn off the overlay entirely by setting it to null, similar to the title:

$('.fancybox').fancybox({
  helpers: {
    overlay: null
  }
});