Question

我想在运行删除功能之前显示一个简单的确认对话框。

这是我到目前为止所拥有的

HTML：

<!-- Delete Confirmation Dialog Box -->

<div id="confirm" style="display:none;">
 <div class="message">Are you sure you want to delete?</div>
    <div class="buttons">
        <div class="cancel">No</div><div class="accept">Yes</div>
    </div>
</div>

<!-- Delete Button/s -->

<a href="javascript:void(0);" onclick="delete("1")"><img src="images/48x_delete.png" alt="48x_delete" width="24" height="24"/></a>
<a href="javascript:void(0);" onclick="delete("2")"><img src="images/48x_delete.png" alt="48x_delete" width="24" height="24"/></a>

...etc...

jQuery的：

function delete(id) { 

    fileName= 'update_db.php';

    $('#response').html("<img src='images/ajax-loader.gif' border=0> Please Wait");
    $.post(fileName,{postvar:1, id:id, action:'delete'}, function(res) { showStatus(res);});

}

有人可以帮我修改我的代码以显示对话框并确认删除吗？感谢!!!

Answer 1

让链接调用函数来显示模态。将id保存在.data（）中。然后连接取消并接受按钮上的方法。

另外，你应该考虑不那么突兀的javascript。因此，您应该使用jquery绑定click事件，而不是向链接添加onclick属性。（例如 - $('a').click(function(){//foo});

<div id="confirm" style="display:none;">
 <div class="message">Are you sure you want to delete?</div>
    <div class="buttons">
        <div class="cancel">No</div><div class="accept">Yes</div>
    </div>
</div>

<!-- Delete Button/s -->

<a href="javascript:void(0);" onclick="showConfirm('1')"><img src="images/48x_delete.png" alt="48x_delete" width="24" height="24"/></a>
<a href="javascript:void(0);" onclick="showConfirm('2')"><img src="images/48x_delete.png" alt="48x_delete" width="24" height="24"/></a>

<script type="text/javascript">
$(function(){

    $('#confirm .accept').click(function(){
        delete($("#confirm").data('deleteId'));
        $("#confirm").hide();
    });
    $('#confirm .cancel').click(function(){
        $("#confirm").data('deleteId','').hide();
    });

});

function showConfirm(id) {
    $('#confirm').data('deleteId', id).show();
}

function delete(id) { 

    fileName= 'update_db.php';

    $('#response').html("<img src='images/ajax-loader.gif' border=0> Please Wait");
    $.post(fileName,{postvar:1, id:id, action:'delete'}, function(res) { showStatus(res);});

}
</script>

删除前确认（jquery）

1 个答案: