在 fancybox2 之外单击

Question

所以我想在不关闭 fancybox 的情况下使用它以外的所有东西。

所以我将 closeclick 设置为 false。我也让它可以拖动，所以我可以在屏幕上移动它，但是如果我试图点击一个按钮，它不会让我。我到处都进行了研究，但每个人都只能通过单击而不是在其外部触发事件来关闭它。我知道它是通过 Iframe 运行进行的，因此也进行了研究，但仍然没有运气。

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

-一个月后编辑。

一直在研究，还没弄明白。正在从事其他项目，然后又出现了这个项目。现在我也在尝试弄清楚如何在花式盒中打开花式盒。使第二个可拖动（不是第一个）并能够在花式框内单击。除非 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>

这是另一页上花式框内的内容。

 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 之外单击

Clicking outside of fancybox2

javascript

asp.net

jquery

fancybox-2