Html 带有css的淡出弹出对话框（不是jquery）

我有一个使用CSS的非常简单的弹出图像。我想知道有没有办法让它褪色。我在过渡方面的所有努力——o-过渡-ms跃迁，-moz跃迁-webkit转换；过渡，；呜呜，呜呜，呜呜。。。什么也没做

谢谢

#按钮{
位置：相对位置；
保证金：1px0；
填充顶部：10px；
光标：指针；
显示：内联块；
位置：绝对位置；
列表样式：无；
保证金：0；
填充：0；
背景重复：无重复；
背景尺寸：封面；
}
.弹出窗口{
位置：绝对位置；
填充顶部：30px；
宽度：100%；
身高：100%；
显示：无；
文本对齐：居中；
背景色：rgba（0,0,0,0.8）；
z指数：101；
}
.弹出窗口：目标{
显示：块；
}
.弹出式img{
填充：10px；
z指数：120；
边框：实心1px灰色；
光标：指针；
背景色：#FFFFFF；
-moz边界半径：2px；
-webkit边界半径：2px；
边界半径：2px；
}

---

按照下面的示例代码解决您的问题 （如果不需要，可以删除模式对话框的页眉和页脚）

/*添加动画（Chrome、Safari、Opera）*/
@-webkit关键帧示例{
从{top:-100px；不透明度：0；}
到{top:0px；不透明度：1；}
}
/*添加动画（标准语法）*/
@关键帧示例{
从{top:-100px；不透明度：0；}
到{top:0px；不透明度：1；}
}
/*情态动词的背景*/
.莫代尔{
显示：无；
位置：固定；
左：0；
排名：0；
宽度：100%；
身高：100%；
溢出：自动；
背景色：rgb（0,0,0）；
背景色：rgba（0,0,0,0.4）；
}
/*目标时显示模式*/
.模态：目标{
显示：表格；
位置：绝对位置；
}
/*模态盒*/
.模态对话框{
显示：表格单元格；
垂直对齐：中间对齐；
}
/*情态动词的内容*/
.模态对话框.模态内容{
保证金：自动；
背景色：#F3；
位置：相对位置；
填充：0；
大纲：0；
边框：1px#777实心；
文本对齐：对齐；
宽度：80%；
盒影：0 4px 8px 0 rgba（0,0,0,0.2），0 6px 20px 0 rgba（0,0,0,0.19）；
/*添加动画*/
-webkit动画名称：示例；/*Chrome、Safari、Opera*/
-webkit动画持续时间：0.5s；/*Chrome、Safari、Opera*/
动画名称：示例；
动画持续时间：0.5s；
}
/*用于关闭模式对话框的按钮*/
.关闭{
文字装饰：无；
浮动：对；
字体大小：35px；
字体大小：粗体；
颜色：#fff；
}
.closebtn:悬停，
.closebtn:焦点{
颜色：#000；
文字装饰：无；
光标：指针；
}
.集装箱{
填充：2x16px；
}
标题{
背景色：#5cb85c；
字体大小：25px；
颜色：白色；
}
页脚{
背景色：#5cb85c；
字体大小：20px；
颜色：白色；
}
模态头
模态页脚

jQuery有褪色效果，你试过使用吗？我没有，我会在谷歌上看看我发现了什么。谢谢。好的，我可以用fadein，但不能用fadeout。不管怎样，我对结果很满意。代码笔：我很高兴你用我的示例代码完成了它，如果它的帮助是充分的，那么你可以投票并勾选我的答案谢谢（y）