有什么方法可以使div后面的按钮可单击，而不禁用div中的按钮？

Question

我有一个网页使用iFrame加载动态标头（长话短说，我们有一个大型网站，其中包含Shopify页面；该网站上的每个其他页面都使用Ektron小部件来加载标头，但我不能这样做Shopify代码中的代码，因此我改用iFrame从单独的页面加载标头）。 标头包含需要工作的按钮，以及单击登录按钮时打开的模式窗口。 模态窗口就是问题所在。 我的iFrame当前是标题本身的大小（330像素）； 如果iFrame窗口大于该窗口，则它将覆盖页面下方的内容，并使这些按钮不可单击。 我无法在iFrame中添加“ pointer-events：none”，因为我需要iFrame标头中的按钮才能正常工作。 但是，当登录模式打开时，由于iFrame不足以显示整个内容，因此它会被截断。 我也不能将iFrame的高度设置为1000px并使用z-index将其放在其他内容的后面，因为当我这样做时，Shopify页面上的内容显示在模式窗口的顶部。

我尝试的最后一件事是动态更改iFrame的高度，以便在单击登录按钮时，iFrame的高度增加以显示整个模态。 但是，由于iFrame内容与Shopify页面具有不同的域，因此无法将iFrame定位为标题文档的父级。

我真正想做的是使iFrame的高度足够大以显示模式窗口，同时使iFrame后面的按钮可单击，而不禁用iFrame中的按钮。 有什么办法可以使div中和后面的按钮同时启用吗？

Answer 1

这将是非常糟糕的UX，您应该真正考虑做其他事情。 但是无论如何，至少在较新的浏览器中，您可以放置​​一个pointer-events: none iframe上pointer-events: none样式，这将使其无法捕获任何点击。 然后，您放置一个pointer-events: auto在iframe中的模式内的按钮上pointer-events: auto放置，以使它们至少可以正确记录点击。 这样，您将实现点击。

当然，所有现代浏览器都支持指针事件 （但不支持IE10及以下版本）