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()`隐藏弹出层。