IE onclick问题隐藏模态div,用CSS过渡显示

时间:2013-05-18 01:15:26

标签: css css3 css-transitions

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

然而,在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> 

任何提示/信息都将受到高度赞赏!

1 个答案:

答案 0 :(得分:0)

没关系 - 我发现如果我只是在转换过程中增加可见性,它也能正常工作......