多个模态框的淡入淡出问题

转载

mob604756e7db9c 2021-08-02 19:06:00

文章标签 模态框网页网页特效 HTML JavaScript 文章分类 代码人生

页面中有三个按钮对应三个模态框，class分别为add、rev、sold，

<div class="add mydefmodal">
                <button type="button" class="close"><span>&times;</span></button>
                <div class="mydefmodal_main">
                    <div class="mydefmodal_header">
                        <h4 class="mydefmodal_title">入库</h4>
                    </div>
                    <div class="mydefmodal_footer">
                        <button type="button" class="mydefbtn mydefbtn_default">取消</button>
                        <button type="button" class="mydefbtn mydefbtn_primary">入库</button>
                    </div>
                    </div>
                </div>
            </div>
<div class="mask"></div>

想实现三个模态框的淡入淡出效果，但需要对每一个模态框进行操作：

window.addEventListener('load', function () {
    // 模态框淡入淡出
    var btnadd = document.querySelector('.addbtn');
    var addmodal = document.querySelector('.add');

    var btnrev = document.querySelector('.revbtn');
    var revmodal = document.querySelector('.rev');

    var btnsold = document.querySelector('.soldbtn');
    var soldmodal = document.querySelector('.sold');

    var mask = document.querySelector('.mask');

    var close = document.querySelectorAll('.close');
    var btndef = document.querySelectorAll('.mydefbtn_default')
    btnadd.addEventListener('click', function () {
        mask.style.display = 'block';
        mask.style.opacity = 1;
        addmodal.style.display = 'block';
        addmodal.style.opacity = 1;
    });
    btnrev.addEventListener('click', function () {
        mask.style.display = 'block';
        mask.style.opacity = 1;
        revmodal.style.display = 'block';
        revmodal.style.opacity = 1;
    });
    btnsold.addEventListener('click', function () {
        mask.style.display = 'block';
        mask.style.opacity = 1;
        soldmodal.style.display = 'block';
        soldmodal.style.opacity = 1;
    });
    // 关闭
    close[0].addEventListener('click', clsadd);
    btndef[0].addEventListener('click', clsadd);
    function clsadd() {
        mask.style.animation = 'fadeout .3s';
        addmodal.style.animation = 'fadeout .3s';
        setTimeout(function () {
            mask.style.display = 'none';
            addmodal.style.display = 'none';
            mask.style.animation = 'fadein .7s';
            addmodal.style.animation = 'fadein .5s';
        }, 300)
        mask.style.opacity = 0;
        addmodal.style.opacity = 0;
    }

    close[1].addEventListener('click', clsrev);
    btndef[1].addEventListener('click', clsrev);
    function clsrev() {
        mask.style.animation = 'fadeout .3s';
        revmodal.style.animation = 'fadeout .3s';
        setTimeout(function () {
            mask.style.display = 'none';
            revmodal.style.display = 'none';
            mask.style.animation = 'fadein .7s';
            revmodal.style.animation = 'fadein .5s';
        }, 300)
        mask.style.opacity = 0;
        revmodal.style.opacity = 0;
    }

    close[2].addEventListener('click', clssold);
    btndef[2].addEventListener('click', clssold);
    function clssold() {
        mask.style.animation = 'fadeout .3s';
        soldmodal.style.animation = 'fadeout .3s';
        setTimeout(function () {
            mask.style.display = 'none';
            soldmodal.style.display = 'none';
            mask.style.animation = 'fadein .7s';
            soldmodal.style.animation = 'fadein .5s';
        }, 300)
        mask.style.opacity = 0;
        soldmodal.style.opacity = 0;
    }
});