原生JS实现简单弹窗和遮罩层功能

最新推荐文章于 2022-04-12 17:19:00 发布

abuanden

最新推荐文章于 2022-04-12 17:19:00 发布

阅读量1k

点赞数 1

分类专栏：项目问题

本文链接：https://blog.csdn.net/abuanden/article/details/115554553

版权

项目问题专栏收录该内容

2 篇文章 0 订阅

订阅专栏

遮罩层为父子关系

	    /*           html              */
<div class="container">
        <div id="popup">
            <span>主题</span>
            <div>
                <span>1</span>
                <span>2</span>
                <span>3</span>
            </div>
        </div>
</div>

    /*           css              */
    .container {
        position: fixed;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        opacity: 0.5;
        z-index: 1;
        background-color: blueviolet;
    }

    #popup {
        padding: 50px;
        display: flex;
        justify-content: center;
        position: absolute;
        align-items: center;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: aquamarine;
        z-index: 2;
    }

    /*           JS              */    
    //这里需要设置点击非弹窗区才触发隐藏。
	//第一种方法,通过判断e.target，即触发事件的节点。
	let container = document.getElementsByClassName('container')[0]
    let popup = document.getElementById('popup')
    container.addEventListener('click', (e) => {
        if (e.target == container) {//
            container.style.display = "none"
        }
    }, false)
	//第二种方法，阻止子节点的冒泡事件。
    let container = document.getElementsByClassName('container')[0]
    let popup = document.getElementById('popup')
    container.addEventListener('click', (e) => {
            container.style.display = "none"
    })
    popup.addEventListener('click', (e) => {
        event.cancelBubble = true
        event.stopPropagation
    })