前端使用html+js+css实现一个弹出选择框

前端使用html+js+css实现一个弹出选择框

弹出一个选择框，支持用户取消和确认

效果图：

index.html页面：

 
这是一个简单的弹出窗
 取消 确定

index.js页面

let tip = document.getElementById("tip")
let ok = document.getElementById("ok")
let cancel = document.getElementById("cancel")
ok.onclick = () => { // 点击确认的操作，删除标签
  tip.remove()
}
cancel.onclick = () => { // 点击确认的操作，删除标签
  tip.remove()
}
``

index.css页面

.tip{ width: 300px;
  height: 140px;
  background-color: #ffffff;
  border: 2px solid #ffffff;
  border-radius: 6px;
  padding: 15px 8px;
  text-align: center;
  display: inline-block;
  font-size: 15px;
  transition-duration: 0.4s;
  cursor: pointer;
  text-decoration: none;
  outline: none;
  font-weight: 600;
  background-color: #ffffff;
  color: #000000;
  box-shadow: 0px 10px 10px #a2a2a2;
  transition: all 1s;
}
.cancel{ background-color: #0099CC;
  border-radius: 10px;
  border: 2px solid #ffffff;
  border-radius: 6px;
  padding: 5px 8px;
  text-align: center;
  display: inline-block;
  font-size: 15px;
  transition-duration: 0.4s;
  cursor: pointer;
  text-decoration: none;
  outline: none;
  font-weight: 400;
  box-shadow: 0px 5px 10px #e5e5e5;
  color: #ffffff;
  margin-top: 30px;
}
.ok{ background-color: #cc1400;
  border-radius: 10px;
  border: 2px solid #ffffff;
  border-radius: 6px;
  padding: 5px 8px;
  text-align: center;
  display: inline-block;
  font-size: 15px;
  transition-duration: 0.4s;
  cursor: pointer;
  text-decoration: none;
  outline: none;
  font-weight: 400;
  box-shadow: 0px 5px 10px #e5e5e5;
  color: #ffffff;
  margin-top: 30px;
}
.cancel:hover { border: 2px solid #0099CC;
  background-color: #ffffff;
  color: #0099CC;
  font-weight: 700;
}
.ok:hover { border: 2px solid #cc1400;
  background-color: #ffffff;
  color: #cc1400;
  font-weight: 700;
}
.ok:active { background-color: #838383d8;
}
.cancel:active { background-color: #838383d8;
}
.ok:focus { outline: none;
}
.cancel:focus { outline: none;
}