弹窗基本样式+动态效果

XUYANBOYA

于 2024-04-07 10:19:16 发布

阅读量543

点赞数 6

文章标签： css 前端 javascript

本文链接：https://blog.csdn.net/XUYANBOYA/article/details/137453858

版权

本文详细描述了如何使用JavaScript通过DOM事件监听器控制一个CSS定义的弹出窗口（.tanchuanga），在用户点击特定元素（.tianjazjz）时显示，点击关闭按钮时隐藏。

摘要由CSDN通过智能技术生成

.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="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>