css 弹出层 点叉关闭

CSS弹出层是网页设计中常用的一种效果，它可以弹出一个浮层显示一些信息或使用红包雨效果等。但是，当用户不想看弹出层时，怎么关闭它就成了一个问题。下面介绍一种简单的方法，通过在CSS中添加一个“X”样式来实现弹出层的关闭。

/* 定义弹出层样式 */
.popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 300px;
  height: 200px;
  background-color: #fff;
  border: 1px solid #999;
  padding: 20px;
}

/* 定义关闭按钮样式 */
.popup-close {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 20px;
  color: #999;
  cursor: pointer;
}

/* 在弹出层中添加“X”样式 */

  ×
  

这是弹出层内容。


/* 添加关闭功能的jQuery代码 */
$('.popup-close').click(function(){
  $('.popup').hide();
});

在CSS中定义了`.popup-close`样式，它的`position`设置为`absolute`，并通过`top`和`right`设置其位置。`font-size`和`color`属性也可以根据需要自行设置，这里使用的是20px和#999。通过在span元素中添加一个`×`表示叉号图标。在jQuery代码中，使用了`.popup-close`选择器来绑定点击事件，当用户点击关闭按钮时，通过`$('.popup').hide()`隐藏弹出层。

总体来说，这种关闭弹出层的方法非常简单，可以快速实现关闭弹出层的功能。