📜  使用 CSS 和 JavaScript 的全屏搜索栏

📅  最后修改于: 2021-11-10 04:06:45             🧑  作者: Mango

在本文中,我们将使用 CSS 和 JavaScript 创建一个全屏搜索栏。我们创建一个按钮,单击该按钮后,我们将显示搜索栏。

方法 :

  • 创建一个按钮并使用 JavaScript 使搜索面板能够切换。
  • 现在拿一个 div 并将其位置固定并将顶部、底部、左侧、右侧属性设置为零,以便搜索栏固定(不可滚动)和全屏。
  • 将其不透明度设置为小于 1 且大于 0 的值,并将背景颜色设置为黑色以使其样式更酷。
  • 添加输入框和图标按钮以关闭搜索栏。

执行 :

HTML



    
  


  
    
  
    
        
                                  
        
                   
    
    


Javascript
const btn =
document.querySelector(".myBtn")
const searchBox =
document.querySelector(".fullScreen")
const closeBtn = 
document.querySelector(".closeBtn")
  
  
closeBtn.addEventListener("click", ()=>{
    searchBox.style.display = "none"
})
  
btn.addEventListener('click', ()=>{
    searchBox.style.display = "block"
})


输出 :