Javascript 我试图打开一个具有某种效果的模式窗口

单击函数时调用

openModal（）

函数

我在Google上查到transition属性与CSS中的display属性不兼容。另一种方法是使用不透明度。但我无法从JavaScript为CSS属性调用动画

var-whm、whs、whd、whc；
函数OpenModel（a）{
whm=“myModal”+a；
whs=“mySlides”+a；
whd=“demo”+a；
whc=“caption”+a；
document.getElementById（whm）.style.display=“block”；
document.getElementById（whm）.style.opacity=“1”；
//document.getElementById（whm）.classList.add（'didLoad'）；
//document.getElementById（whm）.className+=“didLoad”；
document.getElementById（whm.style.webkitTransition=“background 2s”；
}

.modal{
显示：无；
不透明度：0；
-webkit转换：不透明度2s；
过渡：不透明度2s；
位置：固定；
z指数：1；
填充顶部：100px；
左：0；
排名：0；
宽度：100%；
身高：100%；
溢出：自动；
背景色：黑色；

全部代码

身体{
字体系列：Verdana，无衬线；
保证金：0；
}
* {
框大小：边框框；
}
.row>列{
填充：0 8px；
}
.罗：之后{
内容：“；
显示：表格；
明确：两者皆有；
}
.栏目{
浮动：左；
宽度：25%；
}
/*模态（背景）*/
.莫代尔{
显示：无；
不透明度：0；
-webkit转换：不透明度2s；
过渡：不透明度2s；
位置：固定；
z指数：1；
填充顶部：100px；
左：0；
排名：0；
宽度：100%；
身高：100%；
溢出：自动；
背景色：黑色；
}
迪德洛德先生
{
背景色：黑色；
过渡色：背景色2s；
-webkit过渡：背景色2s；
}
/*模态内容*/
.模态内容{
位置：相对位置；
背景色：#fefe；
保证金：自动；
填充：0；
宽度：90%；
最大宽度：1200px；
}
/*关闭按钮*/
.结束{
颜色：白色；
位置：绝对位置；
顶部：10px；
右：25px；
字体大小：35px；
字体大小：粗体；
}
.关闭：悬停，
.结束：聚焦{
颜色：#999；
文字装饰：无；
光标：指针；
}
迈斯利德斯先生{
显示：无；
}
.光标{
光标：指针；
}
/*下一步和上一步按钮*/
.prev，
.下一个{
光标：指针；
位置：绝对位置；
最高：50%；
宽度：自动；
填充：16px；
利润上限：-50px；
颜色：白色；
字体大小：粗体；
字体大小：20px；
过渡：0.6s缓解；
边界半径：0 3px 3px 0；
用户选择：无；
-webkit用户选择：无；
}
/*将“下一步按钮”置于右侧*/
.下一个{
右：0；
边界半径：3px 0 3px；
}
/*在悬停时，添加一个黑色背景色，带有一点透明*/
.prev:悬停，
.下一步：悬停{
背景色：rgba（0,0,0,0.8）；
}
/*数字文本（1/3等）*/
.numbertext{
颜色：#F2F2；
字体大小：12px；
填充：8px 12px；
位置：绝对位置；
排名：0；
}
img{
保证金底部：-4px；
}
.标题容器{
文本对齐：居中；
背景色：黑色；
填充：2x16px；
颜色：白色；
}
.演示{
不透明度：0.6；
}
.主动，
.演示：悬停{
不透明度：1；
}
悬停阴影{
过渡：0.3s；
}
.悬停阴影：悬停{
盒影：0 4px 8px 0 rgba（0,0,0,0.2），0 6px 20px 0 rgba（0,0,0,0.19）；
}
灯箱
&时代；
1/4
2/4
3/4
4/4
❮
❯

&时代；
1/4
2/4
3/4
4/4
❮
❯

&时代；
1/4
2/4
3/4
4/4
❮
❯

&时代；
1/4
2/4
3/4
4/4
❮
❯

var whm、whs、whd、whc；
函数OpenModel（a）{
whm=“myModal”+a；
whs=“mySlides”+a；
whd=“demo”+a；
whc=“caption”+a；
document.getElementById（whm）.style.display=“block”；
document.getElementById（whm）.style.opacity=“1”；
//document.getElementById（whm）.classList.add（'didLoad'）；
//document.getElementById（whm）.className+=“didLoad”；
document.getElementById（whm.style.webkitTransition=“background 2s”；
}
函数closeModal（）{
document.getElementById（whm）.style.display=“无”；
}
var slideIndex=1；
放映幻灯片（幻灯片索引）；
函数加滑块（n）{
放映幻灯片（幻灯片索引+=n）；
}
功能当前幻灯片（n）{
放映幻灯片（幻灯片索引=n）；
}
功能演示幻灯片（n）{
var i；
var slides=document.getElementsByClassName（whs）；
var dots=document.getElementsByClassName（whd）；
var captionText=document.getElementById（whc）；
如果（n>slides.length）{slideIndex=1}
如果（n<1）{slideIndex=slides.length}
对于（i=0；i

转换不适用于

显示

，但使用新的

类

和CSS动画，您可以做一些不错的事情（我只为“show”设置了动画）：

var show=document.getElementById（'show'）；
var hide=document.getElementById（'hide'）；
show.addEventListener（“单击”，函数（）{
文件