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

我会对你的代码做一些调整。

因为您正在调用modal这样的
```
modal("here the html content" + btn);
```
...您需要在函数中传递参数，如
```
var modal = function(msg) { ... }
```
无论您填写#modal容器如何
```
$('#modal').html(msg);
```
...您仍然需要通过添加href API选项，将fancybox指向定位该容器作为fancybox内容：
```
href: "#modal"
```
BTW使用beforeLoad回调代替beforeShow来使用.html()方法填充内容，例如
```
beforeLoad: function () {
    $('#modal').html(msg);
}
```
您的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选项的评论

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

1 个答案: