[分享]css全屏幕下拉框做

CSS全屏幕下拉框是网页设计中常用的组件之一。下面我们就来介绍一下如何使用CSS制作全屏幕下拉框。 / 全屏幕下拉框样式 / .dropdown { : fixed; top: 0; left: 0;...

CSS全屏幕下拉框是网页设计中常用的组件之一。下面我们就来介绍一下如何使用CSS制作全屏幕下拉框。

/* 全屏幕下拉框样式 */
.dropdown {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;
  display: none;
}

/* 下拉框内容样式 */
.dropdown .content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  padding: 20px;
}

/* 下拉框显示效果 */
.dropdown.show {
  display: block;
} 

以上是全屏幕下拉框的基本CSS样式，下面我们将结合JS来实现下拉框的弹出和收起。

// 获取下拉框和关闭按钮元素
var dropdown = document.querySelector('.dropdown');
var closeBtn = document.querySelector('.close-btn');

// 点击按钮显示下拉框
document.querySelector('.open-btn').onclick = function() {
  dropdown.classList.add('show');
};

// 点击关闭按钮隐藏下拉框
closeBtn.onclick = function() {
  dropdown.classList.remove('show');
}; 

以上JS代码中，我们通过获取“打开按钮”和“关闭按钮”元素，并通过添加或移除“show”类来控制下拉框的弹出和收起。

通过以上CSS和JS代码，我们就可以实现一个简单的全屏幕下拉框，使网页更加美观实用。