點擊刪除時,爲了避免無意識誤刪,需要對刪除進行再次確認。
可使用瀏覽器自帶的彈出框:
$('.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');
});