Question

我有这段代码

<div class="line"><a href="" class="del">x</a></div>
<div class="line"><a href="" class="del">x</a></div>
<div class="line"><a href="" class="del">x</a></div>
<div class="line"><a href="" class="del">x</a></div>
<div class="line"><a href="" class="del">x</a></div>
<div class="line"><a href="" class="del">x</a></div>
<div class="line"><a href="" class="del">x</a></div>
<div class="line"><a href="" class="del">x</a></div>
<div class="line"><a href="" class="del">x</a></div>
<div class="line"><a href="" class="del">x</a></div>

我需要在点击.del之后删除每个.line，然后在模式框中显示yes，这是在我点击.del

之后显示的

这是我在JSFiddle

中的代码

但如果我点击然后关闭模态框，然后再次点击.line，在我点击伪确认对话框上的是，它也会删除当前点击的.line。

我知道有自定义确认对话框的插件，但我需要一个示例代码来完成此操作。

所以，我怎样才能只检测最后点击的.line，只删除那个？

UPD

伪模态将显示在右上角，点击“X”后 - 如果有人没有注意到

UPD 2 with animation gif

所以点击第一个.line，显示模态，我点击close-modal，然后我点击最后一行.line，再次模态 - 显示，在这个时候我点击是，我想删除最后一个.line，而是 - 第一个和最后一个.line div正在删除

animated screenshot

Answer 1

这将有效（new jsfiddle）：

var item;

$('.del').click(function(e){
    e.preventDefault();
    item = $(this).closest('.line');
    $('.modal').show();
});

$('.yes').click(function(e){
    e.preventDefault();
    item.fadeOut();
});

$('.close-modal').click(function(e){
    e.preventDefault();
    $('.modal').hide();
});

如何设置样本自定义确认对话框（模态）

1 个答案: