jquery - Fancybox v2 关闭对话框，内容中带有 html 按钮

Question

我正在尝试关闭内容中带有 html 按钮的 fancybox 对话框，而不使用助手或 tpl。但没有成功。

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>

我的代码

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

你能怎么办？谢谢

Answer 1

我会对您的代码进行一些调整。

1. 既然您调用 modal像这样

   modal("here the html content" + btn);
   

   ...您需要在函数中传递参数，例如

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

2. 无论您填写#modal类似容器

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

   ...您仍然需要通过添加href来告诉fancybox目标该容器作为fancybox内容。 API 选项如:

   href: "#modal"
   

   顺便说一句，使用beforeLoad回调而不是 beforeShow用 .html() 填充内容方法如

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

3. 您的btn缺少目标 $.fancybox.close() 的对象方法click所以将其更改为:

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

所以你的最终代码应该如下所示:

var modal = function(msg) {
    $.fancybox({
        minHeight: 100,
        // autoScale: true, // not a valid option for v2.x
        autoSize: true,
        // autoHeight: true, // not needed since autoSize is true
        // autoWidth: true,
        fitToView: true,
        // closeBtn: false, // not needed since modal is 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 the html content" + btn);
    });
}); // ready

参见JSFIDDLE

注意对某些 API 选项的评论