JQuery Fancybox offers sometimes a strange functionality to me. I have learned that a modal frame automatically set this properties no matter of your specified options:

– overlayShow: false;
– hideOnOverlayClick: false;
– hideOnContentClick: false;
– enableEscapeButton: false;
– showCloseButton: false.

Not nice at all. I just wanted a modal frame with a close button placed outside. But I was saved by events attached to Fancybox frame and afterShow was the perfect fit.

	$("a.myselector").fancybox({
		'overlayShow'	:	true,
		'autoScale': true,
		'autoDimensions': false,
		'modal': true,
		'type': 'iframe',
		'autoSize' : false,
		'width' : '90%',
		'showCloseButton' : true,
		afterShow : function() {
			$('.fancybox-skin').append('<a title="Close" class="fancybox-item fancybox-close" href="javascript:jQuery.fancybox.close();"></a>');
		}
		
	});

Function attached to afterShow event is the solution. Got it? Try and see.

Advertisements