jquery - Fancybox v2 close dialog with html button in the content -

jquery - Fancybox v2 close dialog with html button in the content -

i trying close fancybox dialog html button in content without using helpers or tpl. no success.

var modal = function () { $.fancybox({ 'minheight' : 100, 'autoscale' : true, 'autosize' : true, 'autoheight' : true, 'autowidth' : true, 'fittoview' : true, 'closebtn' : false, 'modal' : true, beforeshow: function() { $('#modal').html(msg); } }); }

html

<div id="open">open</div> <div id="modal"></div>

my code

$('#open').on('click', function () { var btn = '<br><a href="javascript:;">close</a>'; modal("here html content" + btn); });

how do? thanks

i tweaks code.

since calling modal this

modal("here html content" + btn);

... need pass parameters within function like

var modal = function(msg) { ... }

regardless filling #modal container like

$('#modal').html(msg);

... still need tell fancybox target container fancybox content adding href api alternative :

href: "#modal"

btw utilize beforeload callback instead of beforeshow fill content .html() method

beforeload: function () { $('#modal').html(msg); }

your btn object missing target $.fancybox.close() method on click alter :

var btn = '<br><a href="javascript:jquery.fancybox.close();">close</a>';

so final code should :

var modal = function(msg) { $.fancybox({ minheight: 100, // autoscale: true, // not valid alternative v2.x autosize: true, // autoheight: true, // not needed since autosize true // autowidth: true, fittoview: true, // closebtn: false, // not needed since modal true modal: true, href: "#modal", beforeload: function () { $('#modal').html(msg); } }); } jquery(document).ready(function ($) { $('#open').on('click', function () { var btn = '<br><a href="javascript:jquery.fancybox.close();">close</a>'; modal("here html content" + btn); }); }); // ready

see jsfiddle

notice comments on api options

jquery fancybox fancybox-2