css - 带有隐藏模式 div 的 IE onclick 问题,通过 CSS 转换显示

标签 css css-transitions

我遇到了一些与 IE9+ 不一致的问题,其中有一个隐藏的模态 div。请参见下面的代码: 在任何其他 HTML5 浏览器上,内联的 onclick 将首先触发警报,然后在 div 中进行转换。之后单击文档上的任意位置将通过转到#close 再次隐藏 div。

然而,在 IE 上,单击似乎完全绕过内联 onclick 并直接进入#close。

我知道有很多解决方法/替代方案可以实现相同的目的,但我只是想了解 IE 为何这样做

<style type="text/css"> 
.modal {position: fixed;top: 0;left: 0;right: 0;bottom: 0;background: rgba(0,0,0,0.5);z-index: 10000;-webkit-transition: opacity 500ms ease-in;-moz-transition: opacity 500ms ease-in;transition: opacity 500ms ease-in;opacity: 0;pointer-events: none;}
.modal:target {opacity: 1;pointer-events: auto;}
</style>
<span onclick='alert("bang");location.href="#popup"'>Bang</span>
<div onclick="location.href='#close'" id=popup class=modal>stuf</iframe></div> 

任何提示/信息将不胜感激!

最佳答案

没关系 - 我发现如果我也只是在过渡中添加可见性,它就可以正常工作......

关于css - 带有隐藏模式 div 的 IE onclick 问题,通过 CSS 转换显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16619801/

相关文章:

css - ul 标签中的对齐文本

css - 使用 vuetify 进行简单的聊天布局,聊天历史记录从下到上增长

javascript - ui-modal-dialog ui-icon-close 颜色变化

css - Sass计算列宽百分比

javascript - CSS Transition 没有缓和

css - :before content 上的转换延迟

jquery - 如何使此自定义帖子类型为使用媒体选项卡上传的所有图像设置 Bootstrap 轮播?

html - 使用 Animate.css 动画化 anchor 标签

javascript - 将元素平稳地移动到新位置而无需手动设置其位置

css - 隐藏元素的过渡