Question

以下代码段显示了我如何使用CSS和JS创建弹出窗口。有没有机会让它在打开/关闭时褪色，而不改变我以前的工作方式，我的意思是只是通过改变它的显示风格来弹出盒子？

function lightbox_open(){
    window.scrollTo(100,500);
    document.getElementById('light').style.display='block';
    document.getElementById('fade').style.display='block'; 
}

function lightbox_close(){
    document.getElementById('light').style.display='none';
    document.getElementById('fade').style.display='none';
}

Answer 1

如果你想坚持使用JS，你可以使用jQuery来做淡化$().fadeIn()或使用CSS3动画。在后一种情况下，默认情况下将不透明度设置为0，并通过Javascript将其更改为1。您需要将其添加到样式表中：

selector {
    opacity: 0;

    -webkit-transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -ms-transition: opacity 1s ease-in-out;
    -o-transition: opacity 1s ease-in-out;
    transition: opacity 1s ease-in-out;
}

Answer 2

您可以在打开时使用jquery fadein()，在关闭时使用fadeout()，但如果您想使用纯javascript，我建议您阅读此source code。他们做得非常好。

Answer 3

你可以使用jQuery：

.fadeIn()

function lightbox_open(){
    window.scrollTo(100,500);
    $('#light,#fade').fadeIn();
}

.fadeOut()

function lightbox_close(){
       $('#light,#fade').fadeOut();
}

打开/关闭时淡化特定的CSS / JS Popup

3 个答案: