Javascript jquery自定义div以确认删除操作_Javascript_Jquery_Ajax

Javascript jquery自定义div以确认删除操作

javascript jquery ajax

Javascript jquery自定义div以确认删除操作,javascript,jquery,ajax,Javascript,Jquery,Ajax,我有这个jquery来删除客户评论我的问题在“如果（确认）”部分。我想显示一个div，询问用户是否确定要删除此评论。而不仅仅是浏览器默认的警报框我该怎么做 var Progressajax = false; $(document).ready(function() { $(".delete_post").on('click',function(){ if(Progressajax) return;

我有这个jquery来删除客户评论

我的问题在“如果（确认）”部分。我想显示一个div，询问用户是否确定要删除此评论。而不仅仅是浏览器默认的警报框

我该怎么做

var Progressajax = false;

$(document).ready(function() {
$(".delete_post").on('click',function(){

                       if(Progressajax) return;
                       Progressajax = true;

var element = $(this);
var I = element.attr("id");

if(confirm('Are you sure?')){

$.ajax({
   type: "POST",
   url: "/js-calls/post_delete.php",
   data: "id="+I,
   success: function(){
            Progressajax = false;
    $(".volta"+I).fadeOut(600, function(){
     $(".volta"+I).remove();
    });
   }
 });
}
return false;
});
});

还有什么我可以改进的吗？

感谢

一个简单的解决方案就是在需要时利用jquery

.hide（）

和

.show（）

来隐藏/显示div元素。您可以通过如上所述的引导功能来增强这一点，使之成为一个更具视觉吸引力的模式对话框，但这应该让您了解代码应该如何工作

HTML

<!DOCTYPE Html />
<html>
    <head>
        <title></title>
    </head>
    <body>
        <input type="button" value="Delete Item" id="btnDelete"/>
        <div id="confirmBox">
            <p>Are you sure you want to delete this record?</p>
            <br />
            <input type="button" value="Yes" id="btnYes"/>
            <input type="button" value="No" id="btnNo" />
        </div>
        <script type="text/javascript" src="jQuery_v1.10.2.js"></script>
        <script type="text/javascript" src="theJS.js"></script>
    </body>
</html>

您可以查看类似bootstrap和bootbox的库，以获得漂亮、简单的模态。jquery ui有一个漂亮的模态选项。您可以向其中添加确认逻辑。有关工作示例，请参阅

$(document).ready(function () {
    $('#confirmBox').hide();

    $('#btnDelete').on('click', function (e) {
        $('#confirmBox').show();
    });

    $('#btnYes').on('click', function (e) {
        //Do Delete Action Here
        alert("Item Deleted");
        $('#confirmBox').hide();
    });

    $('#btnNo').on('click', function (e) {
        //Cancel Action Here
        alert("Action Cancelled");
        $('#confirmBox').hide();
    });

});