1,先看下效果:
而且对话框是可以拖动的:
点击对话框右上角的X 可以关闭对话框:
2,核心代码
边框阴影效果:
Css代码
- div.shadow {
- -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=10, Direction=143, Color=#EA4748)"; /*IE 8*/
- -moz-box-shadow: 4px 3px 10px #03a9f4; /*FF 3.5+*/
- -webkit-box-shadow: 4px 3px 10px #03a9f4; /*Saf3-4, Chrome, iOS 4.0.2-4.2, Android 2.3+*/
- box-shadow: 4px 3px 10px #03a9f4; /* FF3.5+, Opera 9+, Saf1+, Chrome, IE10 */
- filter: progid:DXImageTransform.Microsoft.Shadow(Strength=10, Direction=135, Color=#03a9f4); /*IE 5.5-7*/
- }
背景模糊效果:
Css代码
- -ms-filter: blur(2px) brightness(90%);
- -webkit-filter: blur(2px) brightness(90%);
- -moz-filter: blur(2px) brightness(90%);
- -o-filter: blur(2px) brightness(90%);
- filter: blur(2px) brightness(90%);
注意:
(1)设置.subPagePanel h2的margin-top为0,否则标题栏顶部会有白色空白;
(2)鼠标放在对话框"关闭"按钮上,按钮颜色变成红色,实现代码css:
Css代码
- .subPagePanel a.close:hover {
- background-position: -278px -196px; /*x, y */;
- }
