Question

Fiddle

 $(document).ready(function () {
     $('.del').click(function () {

         // var id = $(this).attr('cmnt-id');
         // $.post(url,{
         //data sent
         //},function(data){
         //remove the comment div

         //show the confirm box and ask for that question now
         confirmBox("Sure wanna delete this?");
         $('#console').append('deleted<br />');
         //});
     });

 });

 function confirmBox(text) {
     var c = $('.confirm');
     c.children('.confirm-text').text(text);
     c.show();
 }

当我点击删除时，我想先确认，然后在delete中添加#console进行删除。

我不想要任何自定义浏览器confirm()或任何插件。

但我无法了解如何实施确认框，请帮助！

更新

如果我有这样的东西

<button data-id="10" id="send">SEND</button>

jQuery

$('.send').click(){
   var data_id = $(this).attr('data-id');

   $.post(url{
       data_id : data_id
   },function(){data}{

     $('#console').append('sent');    

   });
};

如果我有这样的东西，那么我将如何在这里实现confirmbox功能？

Answer 1

为是按钮添加点击事件监听器，并在确认框中添加否按钮。

像这样（jQuery）：

$('.confirm > .yes').click(function () {
    $('#console').append('deleted<br />');

//OR DO WHAT YOU WANT WHEN 'YES' BUTTON IS CLICKED

    $('.confirm').hide();
});
$('.confirm > .no').click(function () {

//OR DO WHAT YOU WANT WHEN 'NO' BUTTON IS CLICKED

    $('.confirm').hide();
});

更新 // for the sake of "reusability"

修改confirmBox() function因此它会接受两个参数（确认框文本，单击是按钮时要执行的功能）。

像：

function confirmBox(text,yesFunc) {
    var c = $('.confirm');
    c.children('.confirm-text').text(text);
    c.show();
    $('.confirm > .yes').click(function () {
         yesFunc();
         c.hide();
         yesFunc = function () {};
    });    
    $('.confirm > .no').click(function () {
         c.hide();
         yesFunc = function () {};
    });
}

现在在事件处理程序中调用confirmBox（）函数，其中单击任何按钮（delete / create / etc。）并传递相应按钮的动作/功能。

LIKE：

 $('.del').click(function () {
    confirmBox("Sure wanna delete this?", function () {
    $('#console').append('deleted<br />') //or whatever function
    });
});

$('.cre').click(function () {
    confirmBox("Sure wanna create this?", function () {
    $('#console').append('created<br />'); //or whatever function
    });
});

$('.send').click(function () {
    confirmBox("Sure wanna send this?", function () {
    $('#console').append('sent<br />'); //or whatever function 
    });
});

<强> WORKING DEMO

Answer 2

您只需将删除功能分配给“是”＆＃39;按钮

JsFIddle http://jsfiddle.net/jj64k/7/

 $('.yes').click(function () {
         $('#console').append('deleted<br />');
         $('.confirm').hide();

     });

Answer 3

$(document).ready(function () {
     $('.del').click(function () {
         confirmBox("Sure wanna delete this?", function(){
           // var id = $(this).attr('cmnt-id');
           // $.post(url,{
           //data sent
           //},function(data){
           //remove the comment div

           //show the confirm box and ask for that question now
           $('#console').append('deleted
');
           //});
       });
    });
 });

 function confirmBox(text, yesFunc) {
     var c = $('.confirm');
     c.children('.confirm-text').text(text);
     c.show();

     $(".yes").unbind("click").click(function(){yesFunc(); c.hid();});
     $(".no").click(function(){c.hide();});
 }

Answer 4

更新以使确认框可重用，这需要jQuery 1.9.1：

$(document).ready(function () {
     $('.del').click(function () {
         //Delete confirm box. Attaching a callback function
         confirmBox("Sure wanna delete this?", function () {
             $('#console').append('deleted<br />');
             $('.confirm').hide();
         });
     });
     $('.cre').click(function () {
         // Create confirm box. Attaching a calling function
         confirmBox("Sure wanna append this?", function () {
             $('#console').append('appended<br />');
             $('.confirm').hide();
         });
     });
     // Genetic No button event
     $('.no').click(function () {
         $('.confirm').hide();
     });
 });

 // Notice the confirmBox function now takes a callback function for the yes button click event
 function confirmBox(text, callback) {
     var c = $('.confirm');
     c.children('.confirm-text').text(text);
     c.show();
     $(document).off('click', '.yes');           // Cancel previous click event listener
     $(document).on('click', '.yes', callback);  // New click event listener setup
 }

请参阅以下工作代码：

JSFiddle

使用jquery，css创建自定义确认框

4 个答案: