javascript - 打开/关闭时淡化特定的 CSS/JS 弹出窗口

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

$().fadeIn()如果您想坚持使用裸 JS，您可以使用 jQuery 进行淡入淡出或使用 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

fadein()您可以在打开和关闭时使用 jquery fadeout()，但如果您想使用纯 javascript 进行操作，我建议您阅读此源代码。他们做得很好。

Answer 3

您可以使用 jQuery：

。淡入（）

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

。消退（）

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