简体繁体 English

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

[英]Is there any way to make buttons behind a div clickable, without disabling the buttons IN the div?

原文 2014-07-23 14:53:49 8 1 html/ button/ iframe/ pointer-events/ behind

I have a webpage that uses an iFrame to load a dynamic header (long story short, we have a big site which includes a Shopify page; every other page on the site uses an Ektron widget to load the header, but I can't do that in the Shopify code, so instead I'm using an iFrame to load the header from a separate page). 我有一个网页使用iFrame加载动态标头（长话短说，我们有一个大型网站，其中包含Shopify页面；该网站上的每个其他页面都使用Ektron小部件来加载标头，但我不能这样做Shopify代码中的代码，因此我改用iFrame从单独的页面加载标头）。 The header has buttons that need to work, as well as a modal window that opens when the login button is clicked. 标头包含需要工作的按钮，以及单击登录按钮时打开的模式窗口。 The modal window is the problem. 模态窗口就是问题所在。 My iFrame is currently the size of the header itself (330px); 我的iFrame当前是标题本身的大小（330像素）； if the iFrame window is bigger than that, it covers the content lower on the page and makes those buttons unclickable. 如果iFrame窗口大于该窗口，则它将覆盖页面下方的内容，并使这些按钮不可单击。 I can't add "pointer-events:none" to the iFrame, because I need the buttons in the iFrame header to work. 我无法在iFrame中添加“ pointer-events：none”，因为我需要iFrame标头中的按钮才能正常工作。 However, when the login modal opens, it gets cutoff because the iFrame is not big enough to display the whole thing. 但是，当登录模式打开时，由于iFrame不足以显示整个内容，因此它会被截断。 I also can't set the iFrame height to say 1000px and use z-index to put it behind the other content, because when I do that, the content on the Shopify page displays on top of the modal window. 我也不能将iFrame的高度设置为1000px并使用z-index将其放在其他内容的后面，因为当我这样做时，Shopify页面上的内容显示在模式窗口的顶部。

The last thing I tried was the dynamically change the height of the iFrame so that when the login button is clicked, the height of the iFrame increases to show the whole modal. 我尝试的最后一件事是动态更改iFrame的高度，以便在单击登录按钮时，iFrame的高度增加以显示整个模态。 However, because the iFrame content has a different domain from the Shopify page, I cannot target the iFrame as the parent of the header document. 但是，由于iFrame内容与Shopify页面具有不同的域，因此无法将iFrame定位为标题文档的父级。

What I really want to do is make the height of the iFrame big enough to display the modal window, but also make the buttons behind the iFrame clickable, without disabling the buttons in the iFrame. 我真正想做的是使iFrame的高度足够大以显示模式窗口，同时使iFrame后面的按钮可单击，而不禁用iFrame中的按钮。 Is there any way at all that I can enable buttons both in AND behind a div? 有什么办法可以使div中和后面的按钮同时启用吗？

1 个解决方案

This will be a very bad UX, and you should really be thinking of doing something else. 这将是非常糟糕的UX，您应该真正考虑做其他事情。 But anyway, atleast in the newer browsers, you can put a pointer-events: none style on the iframe, which will not let it capture any click. 但是无论如何，至少在较新的浏览器中，您可以放置一个pointer-events: none iframe上pointer-events: none样式，这将使其无法捕获任何点击。 Then you put a pointer-events: auto on the buttons inside the modal within the iframe so that atleast they register the click correctly. 然后，您放置一个pointer-events: auto在iframe中的模式内的按钮上pointer-events: auto放置，以使它们至少可以正确记录点击。 This way, you'll achieve the click-through. 这样，您将实现点击。