使用JavaScript和CSS，通過創(chuàng)建一個(gè)隱藏的div元素作為彈出層，并在需要時(shí)通過改變其樣式來顯示或隱藏。

如何把一個(gè)HTML頁面做成彈出層

創(chuàng)新互聯(lián)公司專注于企業(yè)全網(wǎng)營銷推廣、網(wǎng)站重做改版、奎屯網(wǎng)站定制設(shè)計(jì)、自適應(yīng)品牌網(wǎng)站建設(shè)、H5技術(shù)、購物商城網(wǎng)站建設(shè)、集團(tuán)公司官網(wǎng)建設(shè)、成都外貿(mào)網(wǎng)站建設(shè)公司、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁設(shè)計(jì)等建站業(yè)務(wù)，價(jià)格優(yōu)惠性價(jià)比高，為奎屯等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。

1. 創(chuàng)建HTML結(jié)構(gòu)

我們需要?jiǎng)?chuàng)建一個(gè)基本的HTML結(jié)構(gòu)，包括一個(gè)按鈕和一個(gè)用于顯示彈出層的容器。

    
    
    


    打開彈出層
    

        

            ×
            
這是一個(gè)彈出層！
        
    

2. 添加CSS樣式

接下來，我們需要為彈出層和相關(guān)的元素添加CSS樣式。

.modal {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.4);
}
.modal-content {
    background-color: #fefefe;
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
}
.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}
.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

3. 添加JavaScript交互

我們需要使用JavaScript為按鈕和關(guān)閉圖標(biāo)添加交互功能，以實(shí)現(xiàn)打開和關(guān)閉彈出層的效果。

document.getElementById('openModal').addEventListener('click', function() {
    document.getElementById('myModal').style.display = 'block';
});
document.getElementsByClassName('close')[0].addEventListener('click', function() {
    document.getElementById('myModal').style.display = 'none';
});
window.addEventListener('click', function(event) {
    if (event.target == document.getElementById('myModal')) {
        document.getElementById('myModal').style.display = 'none';
    }
});

至此，我們已經(jīng)實(shí)現(xiàn)了一個(gè)簡單的HTML彈出層，點(diǎn)擊按鈕時(shí)，彈出層會顯示在頁面上；點(diǎn)擊關(guān)閉圖標(biāo)或點(diǎn)擊彈出層以外的區(qū)域時(shí)，彈出層會關(guān)閉。

當(dāng)前文章：如何把一個(gè)html頁面做成彈出層
轉(zhuǎn)載來源：http://uogjgqi.cn/article/ccooejh.html