我想要得到一个确认消息点击删除(这可能是一个按钮或图像)。如果用户选择“Ok”,那么删除就完成了,否则如果点击“Cancel”,什么都不会发生。

当点击按钮时,我尝试回显这个,但是回显的东西使我的输入框和文本框失去了它们的样式和设计。


当前回答

如果你对一些快速漂亮的解决方案与css格式感兴趣,你可以使用SweetAlert

$(function(){ $(".delete").click(function(){ swal({ title: "Are you sure?", text: "You will not be able to recover this imaginary file!", type: "warning", showCancelButton: true, confirmButtonColor: "#DD6B55", confirmButtonText: "Yes, delete it!", closeOnConfirm: false }).then(isConfirmed => { if(isConfirmed) { $(".file").addClass("isDeleted"); swal("Deleted!", "Your imaginary file has been deleted.", "success"); } }); }); }); html { zoom: 0.7 } /* little "hack" to make example visible in stackoverflow snippet preview */ body > p { font-size: 32px } .delete { cursor: pointer; color: #00A } .isDeleted { text-decoration:line-through } <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script> <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script> <link rel="stylesheet" href="http://t4t5.github.io/sweetalert/dist/sweetalert.css"> <p class="file">File 1 <span class="delete">(delete)</span></p>

其他回答

<a href="javascript:;" onClick="if(confirm('Are you sure you want to delete this product')){del_product(id);}else{ }" class="btn btn-xs btn-danger btn-delete" title="Del Product">Delete Product</a>


function del_product(id){
    $('.process').css('display','block');
    $('.process').html('<img src="./images/loading.gif">');
    $.ajax({
        'url':'./process.php?action=del_product&id='+id,
        'type':"post",
        success: function(result){
            info=JSON.parse(result);
            if(result.status==1){
            setTimeout(function(){
                    $('.process').hide();
                    $('.tr_'+id).hide();
                },3000);
                setTimeout(function(){
                    $('.process').html(result.notice);
                },1000);
            }else if(result.status==0){
                setTimeout(function(){
                    $('.process').hide();
                },3000);
                setTimeout(function(){
                    $('.process').html(result.notice);
                },1000);

                }
            }
        });
}
function ConfirmDelete()
{
  return confirm("Are you sure you want to delete?");
}


<input type="button" onclick="ConfirmDelete()">

HTML:

<a href="#" class="delete" data-confirm="Are you sure to delete this item?">Delete</a>

使用jQuery:

$('.delete').on("click", function (e) {
    e.preventDefault();

    var choice = confirm($(this).attr('data-confirm'));

    if (choice) {
        window.location.href = $(this).attr('href');
    }
});
<a href="javascript:;" onClick="if(confirm('Are you sure you want to delete this product')){del_product(id);}else{ }" class="btn btn-xs btn-danger btn-delete" title="Del Product">Delete Product</a>

<!-- language: lang-js -->
<script>
function del_product(id){
    $('.process').css('display','block');
    $('.process').html('<img src="./images/loading.gif">');
    $.ajax({
        'url':'./process.php?action=del_product&id='+id,
        'type':"post",
        success: function(result){
            info=JSON.parse(result);
            if(result.status==1){
                setTimeout(function(){
                    $('.process').hide();
                    $('.tr_'+id).hide();
                },3000);
                setTimeout(function(){
                    $('.process').html(result.notice);
                },1000);
            } else if(result.status==0){
                setTimeout(function(){
                    $('.process').hide();
                },3000);
                setTimeout(function(){
                    $('.process').html(result.notice);
                },1000);
            }
        }
    });
}
</script>
<form onsubmit="return confirm('Are you sure?');" />

适用于表单。表单特定的问题:JavaScript表单提交-确认或取消提交对话框