点击删除时,为了避免无意识误删,需要对删除进行再次确认。
可使用浏览器自带的弹出框:
$('.remove').click(function(){
$that=$(this);
if(!confirm("确认删除?")){
window.event.returnValue = false;
}else{
$that.parent("ul").remove();
//发送ajax请求删除数据
}
})
在某些情况下,需要对弹出框做一些指定样式。
.layer{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
opacity: 0.8;
text-align: center;
padding-top: 50%;
color: white;
display: none;
cursor: pointer;
}
HTML 部分
<a class='remove'>删除1</a>
<a class='remove'>删除2</a>
<a class='remove'>删除3</a>
<a class='remove'>删除4</a>
<a class='remove'>删除5</a>
<a class='remove'>删除6</a>
<div id="layer" class="layer">
确认删除?
<a id='true'>确认</a>
<a id='false'>取消</a>
</div>
$('#true,#false').click(function(){
if(this.id=='true'){
$('.isRemove').remove();
//发送ajax请求删除数据
}else{
$('.isRemove').removeClass('isRemove');
}
$('.layer').css('display','none');
});
$('.remove').click(function(){
$('.layer').css('display','block');
$(this).addClass(' isRemove');
});