Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

纯CSS实现淡入淡出对话框

  页面变暗弹出一个对话框,这是现在很多网站对对话框的一致做法,大家基本都是通过JavaScript来实现的。实际上这个功能仅需现代浏览器上的一些CSS特性就能实现,只是纯CSS毕竟不太灵活,这个做法也许不能在项目中直接使用,但这个思路是可以借鉴的。
  首先的问题是如何侦测响应?CSS中提供了很多伪类都可以用于交互,比如:hover、:focus,等。但一个对话框弹出后用户可能还需要对对话框内的内容操作,所以不是简单的弹出就可以的,因此应该用更强力的:target伪类。
  然后的问题就是如何实现淡入淡出?虽然CSS3中提供了transition可以提供过渡效,但如果用display之类的属性来操作就无法实现对话框淡入淡出的切换,因此需要切换的是opacity。为了使对话框处于隐藏状态时候不挡住其它东西,这里还使用了pointer-events将其隐藏状态的操作屏蔽掉。@IntPtr同学补充,此处可以使用visibility属性的hiddenvisible过渡,不必劳烦pointer-events
  解决了这两个问题之后,其它就是小事了,只需要用一些A标签来控制导航栏的hash,并使用:target伪类根据不懂hash对对话框做不同状态变化即可。下面是完整代码
<style>
body {font-size:14px;}
#dialog {
  position:fixed;
  left:0px;right:0px;
  top:0px;bottom:0px;
  background:rgba(0,0,0,0.5);
  pointer-events:none;
  opacity:0;
  transition:opacity 200ms ease;
}
#dialog:target {
  opacity:1;
  pointer-events:all;
}
#dialog>div {
  color:#333;
  text-decoration:none;
  width:300px;height:200px;
  padding:10px;
  background:#F5F5F5;
  border:1px solid #CCC;
  border-radius:10px;
  position:absolute;
  left:0px;right:0px;
  top:0px;bottom:0px;
  margin:auto;
}
#dialog>a {display:block;width:100%;height:100%;}
</style>
<a href="#dialog">[点我弹出对话框]</a>
<div id="dialog">
  <a href="#" title="关闭对话框"></a>
  <div>
    我就是传说中的对话框
  </div>
</div>
网名:
54.144.24.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^