弹窗基本样式+动态效果

.tianja{
    display: block;
}

.tanchuanga{
    display:none;
    width: 100%;
    background-color: #fff;
    z-index: 999;
    position: absolute;
    bottom: 1rem;
    border-radius: 10px 10px 0px 0px;
    box-shadow: 0 10px 20px 0 rgba(19, 219, 148, 0.2);
    height: 80vh;
}

<div class="tianja zjz">
    <div class="tjxx">+添加信息</div>
</div>

<div class="tanchuanga">
            <div style="display: flex; justify-content: space-between;">
                <div class="tyyxx">请填写OD左眼信息</div>
                <div class="closed">关</div>
            </div>
                
            <div>
                弹窗内容
            </div>
        </div>
<script>
    const tianjia = document.querySelector('.tianja')
    const tanchuang = document.querySelector('.tanchuanga')
    const guanbi = document.querySelector('.closed')
    tianjia.addEventListener('click', () => {
    tanchuang.style.display = 'block'
    })
    guanbi.addEventListener('click', () => {
    tanchuang.style.display = 'none'
    })
</script>

原文地址：https://blog.csdn.net/XUYANBOYA/article/details/137453858

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！