在網頁制作中,點擊彈框是常用的一種交互效果,可以讓頁面更加生動有趣,提升用戶體驗。CSS可以實現點擊彈框效果,下面我們來介紹一下實現的方法。
/*HTML部分*/關閉/*CSS部分*/ #layer { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 300px; height: 200px; background-color: #fff; border-radius: 5px; box-shadow: 0 0 10px rgba(0,0,0,.3); display: none; /*默認隱藏*/ } #layer h3 { font-size: 20px; margin: 20px; } #layer p { font-size: 16px; margin: 20px; } #layer .close { position: absolute; top: 10px; right: 10px; cursor: pointer; } /*JS部分*/ var btn = document.getElementById('btn'); var layer = document.getElementById('layer'); var close = layer.querySelector('.close'); btn.onclick = function() { layer.style.display = 'block'; /*點擊按鈕顯示彈框*/ } close.onclick = function() { layer.style.display = 'none'; /*點擊關閉按鈕隱藏彈框*/ }彈框標題
這里是彈框內容。
上述代碼中,通過CSS樣式設置彈框的樣式和位置,并利用JavaScript實現點擊按鈕彈出彈框,點擊關閉按鈕隱藏彈框。其中,display屬性用于控制元素的顯示和隱藏,none為隱藏,block為顯示。
總體來說,CSS點擊彈框實現簡單,適用于多種場景,可以根據需求自定義彈框樣式和內容。希望本文能夠對你有所幫助!
上一篇mysql建表亂碼
下一篇mysql建表一對多