Question

所以我试图能够使用我的fancybox之外的所有内容而不关闭它。

所以我将closeclick设置为false。我让它也可以拖动，所以我可以在屏幕上移动它但是如果我试着点击按钮它就不会让我。我到处研究过，但是每个人都有办法通过点击不发射它之外的事件来关闭它。我知道它是通过iframe进行的，因此也进行了研究，但仍然没有运气。

如果不可能，还有另一种弹出窗口的方式。我希望能够点击fanxybox之外的东西。

- 一个月后编辑。

一直在研究并且尚未弄明白。正在研究其他项目，然后又出现了这个项目。现在我也想弄清楚如何在fancybox中打开一个fancybox。使第二个可拖动（不是第一个）并且能够在fancybox内部单击。除非fancybox不是所有这一切的方式，否则还有其他方法可以做到。

这是我的第一页

 $(".fancybox").fancybox({
                fitToView: false,
                beforeShow: function () {
                    this.width = 1000;
                    this.height = 300;
                }  
            });


     <a class="fancybox fancybox.iframe" href="">
<center>
<img src="images/calendar.png" border="0" style="height: 25px; width: 25px;" /></center>
                                                </a>

以下是另一页上fancybox的内容。

 parent.$(".fancybox").fancybox({
                fitToView: false,
                beforeShow: function () {
                    this.width = 500;
                    this.height = 100;
                },
                afterShow: function () {
                $(".fancybox-wrap").draggable();
            }
            });
<a class="fancybox fancybox.iframe" href="">
<img src="images/arrow-right-3.png" border="0" style="height: 25px; width: 25px;" /></a>

但是当我运行那个时，fancybox没有出来，它只是进入下一页。不确定它是否正在关闭第一个打开这个或者它只是重定向。

我试过了Here，但这似乎不起作用。这是多年来一直困扰我的事情，所以任何帮助都会受到赞赏。

Answer 1

您应该能够将helpers.overlay选项设置为false，这将阻止叠加显示：

parent.$(".fancybox").fancybox({
    fitToView: false,
    beforeShow: function () {
        this.width = 500;
        this.height = 100;
        // If helpers.overlay = false doesn't work, uncomment below.
        // $('#fancybox-overlay').remove();
    },
    helpers: {
        overlay: false
    },
    afterShow: function () {
        $(".fancybox-wrap").draggable();
    }
});

如果失败，在beforeShow方法中，您可以简单地删除叠加元素。对话框周围有一个区域无法点击（对于渐变效果）但其他一切都适合我。

HTH

Answer 2

两个步骤：

1）将overlayShow选项设置为false

 $(".fancybox").fancybox({
                fitToView: false,
                overlayShow: false,
                beforeShow: function () {
                    this.width = 1000;
                    this.height = 300;
                },
                afterShow: function () {
                    $(".fancybox-wrap").draggable();
                }
            });

2）将填充设置为0，您可以通过将padding: 0添加到您的fancybox容器或将其添加到CSS文件中来实现此目的

.fancybox-wrap {
    padding: 0 !important;
}

点击fancybox2

2 个答案: