css3点击跳出弹出框

CSS3中的弹出框效果可以用来实现各种场景下的提示或者操作框。它的实现方法主要是通过CSS3中的伪元素（:before和:after）以及CSS3动画效果来达到的。

我们先来看一个简单的例子：

.modal-wrapper{
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 9999;
  background: rgba(0,0.7);
  display: none;
}

.modal{
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  z-index: 10000;
  padding: 10px;
  background: #fff;
  border-radius: 5px;
}

.modal:before{
  content: "你确定要删除吗？";
  display: block;
  font-size: 16px;
  margin-bottom: 10px;
  text-align: center;
}

.modal-buttons{
  text-align: center;
}
.modal-buttons button{
  margin-right: 10px;
}

以上是CSS部分的代码，我们可以看到，它包含了一个modal-wrapper和一个modal两个部分。modal-wrapper是用来遮罩整个页面的，而modal部分则是用来实现弹出框的。其中，我们使用了CSS3中的transform属性来实现弹出框的居中定位，并对modal部分设置了:before伪元素来实现文字提示效果。此外，我们还设置了一个modal-buttons部分，用来包含操作按钮。

接下来，我们来看一下JS部分的代码：

var modal_wrapper = document.querySelector('.modal-wrapper');
var modal = document.querySelector('.modal');

function open_modal(){
  modal_wrapper.style.display = "block";
  modal.style.display = "block";
}

function close_modal(){
  modal_wrapper.style.display = "none";
  modal.style.display = "none";
}

document.querySelector('.btn-delete').addEventListener('click',function(){
  open_modal();
});

document.querySelector('.btn-agree').addEventListener('click',function(){
  // your code here
  close_modal();
});

document.querySelector('.btn-cancel').addEventListener('click',function(){
  close_modal();
});

以上是JS部分的代码，我们主要是通过addEventListener来绑定点击事件。当点击.btn-delete时会触发open_modal函数，显示弹出框；当点击.btn-agree或.btn-cancel时会触发close_modal函数，隐藏弹出框。

总的来说，CSS3中的弹出框效果可以帮助我们实现很多在交互中需要的提示和操作框，它的实现方法简单易懂，可以通过我们的深入学习来实现更加复杂的效果。