[分享]css制作div弹出提示框

CSS制作弹出提示框是网页设计中常见的一个技巧，它可以在用户交互时显示出提示信息，提高用户体验。首先，在HTML中创建一个div元素作为提示框的容器，给它添加一个唯一的ID，以便在CSS中使用。 接着...

CSS制作弹出提示框是网页设计中常见的一个技巧，它可以在用户交互时显示出提示信息，提高用户体验。

首先，在HTML中创建一个div元素作为提示框的容器，给它添加一个唯一的ID，以便在CSS中使用。

<div id="box"></div> 

接着，在CSS中设置提示框的样式。我们可以使用伪元素:before和:after来实现三角形箭头的效果，并通过绝对定位来让提示框在需要显示的位置上弹出。下面是样式代码：

#box {
  position: absolute;
  top: 20px;
  left: 20px;
  width: 200px;
  height: 100px;
  background-color: #fff;
  border: 1px solid #ccc;
  padding: 10px;
}
#box:before {
  content: '';
  display: block;
  position: absolute;
  top: -10px;
  left: 50%;
  margin-left: -10px;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid #ccc;
}
#box:after {
  content: '';
  display: block;
  position: absolute;
  top: -9px;
  left: 50%;
  margin-left: -9px;
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-bottom: 9px solid #fff;
} 

最后，使用JavaScript代码来控制提示框的显示与隐藏。

var box = document.getElementById('box');
box.style.display = 'none';
document.onclick = function() {
  box.style.display = 'block';
} 

上述JavaScript代码通过获取ID为"box"的元素并将display属性设置为none，实现了最开始提示框隐藏的效果。而当用户点击页面其他位置时，会触发onclick事件，将提示框的display属性设置为block，显示出提示框。

这样，我们就成功地用HTML、CSS和JavaScript语言联合起来制作了一个简单的div弹出提示框。