Developing a personalized pop-up notification using jQuery and CSS

Question

Developing a personalized pop-up notification using jQuery and CSS

 $(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();
 }

Before deleting upon clicking, I need to show a confirmation message. Once confirmed, the action will be executed by displaying 'delete' in the console.

I prefer not to use any custom browser popups like confirm() or additional plugins.

However, I'm unsure how to integrate the confirm box functionality effectively. Any assistance would be appreciated!

UPDATE

If there is an element such as:

<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');    

   });
};

In this scenario, how can I implement the confirmbox function properly?

javascript jquery html css confirm

Answer 1

Answer №1

Set up event listeners to handle clicks on the Yes and No buttons in your confirmation box.

Here's an example using jQuery:

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

//DO SOMETHING WHEN 'YES' IS CLICKED

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

//DO SOMETHING WHEN 'NO' IS CLICKED

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

UPDATE // for reusability

We've updated the confirmBox() function to accept two parameters: (the text to display in the confirm box, the function to execute when Yes is clicked).

Example:

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 () {};
    });
}

Now you can call the confirmBox() function within event handlers for different buttons (e.g., delete, create, etc.) and pass the corresponding actions/functions.

EXAMPLES:

$('.del').click(function () {
    confirmBox("Are you sure you want to delete this?", function () {
    $('#console').append('deleted<br />') //or other function
    });
});

$('.cre').click(function () {
    confirmBox("Are you sure you want to create this?", function () {
    $('#console').append('created<br />'); //or other function
    });
});

$('.send').click(function () {
    confirmBox("Are you sure you want to send this?", function () {
    $('#console').append('sent<br />'); //or other function 
    });
});

VIEW WORKING DEMO

Answer 2

Set up event listeners to handle clicks on the Yes and No buttons in your confirmation box.

Here's an example using jQuery:

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

//DO SOMETHING WHEN 'YES' IS CLICKED

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

//DO SOMETHING WHEN 'NO' IS CLICKED

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

UPDATE // for reusability

We've updated the confirmBox() function to accept two parameters: (the text to display in the confirm box, the function to execute when Yes is clicked).

Example:

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 () {};
    });
}

Now you can call the confirmBox() function within event handlers for different buttons (e.g., delete, create, etc.) and pass the corresponding actions/functions.

EXAMPLES:

$('.del').click(function () {
    confirmBox("Are you sure you want to delete this?", function () {
    $('#console').append('deleted<br />') //or other function
    });
});

$('.cre').click(function () {
    confirmBox("Are you sure you want to create this?", function () {
    $('#console').append('created<br />'); //or other function
    });
});

$('.send').click(function () {
    confirmBox("Are you sure you want to send this?", function () {
    $('#console').append('sent<br />'); //or other function 
    });
});

VIEW WORKING DEMO

Answer 3

Answer №2

Enhanced the confirm box to be reusable with jQuery 1.9.1:

$(document).ready(function () {
     $('.del').click(function () {
         //Confirmation box for delete action with callback function
         confirmBox("Are you sure you want to delete this?", function () {
             $('#console').append('deleted<br />');
             $('.confirm').hide();
         });
     });
     $('.cre').click(function () {
         // Confirmation box for append action with calling function
         confirmBox("Are you sure you want to append this?", function () {
             $('#console').append('appended<br />');
             $('.confirm').hide();
         });
     });
     // No button event handling
     $('.no').click(function () {
         $('.confirm').hide();
     });
 });

 // Updated confirmBox function now accepts a callback function for yes button click event
 function confirmBox(text, callback) {
     var c = $('.confirm');
     c.children('.confirm-text').text(text);
     c.show();
     $(document).off('click', '.yes');           // Clear previous click event listener
     $(document).on('click', '.yes', callback);  // Set up new click event listener
 }

View working code at:

JSFiddle

Answer 4

Enhanced the confirm box to be reusable with jQuery 1.9.1:

$(document).ready(function () {
     $('.del').click(function () {
         //Confirmation box for delete action with callback function
         confirmBox("Are you sure you want to delete this?", function () {
             $('#console').append('deleted<br />');
             $('.confirm').hide();
         });
     });
     $('.cre').click(function () {
         // Confirmation box for append action with calling function
         confirmBox("Are you sure you want to append this?", function () {
             $('#console').append('appended<br />');
             $('.confirm').hide();
         });
     });
     // No button event handling
     $('.no').click(function () {
         $('.confirm').hide();
     });
 });

 // Updated confirmBox function now accepts a callback function for yes button click event
 function confirmBox(text, callback) {
     var c = $('.confirm');
     c.children('.confirm-text').text(text);
     c.show();
     $(document).off('click', '.yes');           // Clear previous click event listener
     $(document).on('click', '.yes', callback);  // Set up new click event listener
 }

View working code at:

JSFiddle

Answer 5

Answer №3

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

           //show the confirmation box and ask for confirmation 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 6

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

           //show the confirmation box and ask for confirmation 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 7

Answer №4

To make it work, simply link the delete feature to the 'yes' button.

Check out this JSFiddle example: http://jsfiddle.net/jj64k/7/

 $('.yes').click(function () {
         $('#log').append('Item deleted successfully<br />');
         $('.confirmMsg').hide();

     });

Answer 8

To make it work, simply link the delete feature to the 'yes' button.

Check out this JSFiddle example: http://jsfiddle.net/jj64k/7/

 $('.yes').click(function () {
         $('#log').append('Item deleted successfully<br />');
         $('.confirmMsg').hide();

     });

Developing a personalized pop-up notification using jQuery and CSS

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Binding an event to an Angular 2 component directly within its selector code

Creating a login system in Node.js with the help of Express

What is the best way to display data stored in local storage using React and Typescript?

Using DataTable with backend processing

How can Conditional Rendering be applied within List Rendering (v-for) in Vue JS?

Attempting to configure the SCSS compiler in Broccoli.js and Ember-CLI

What is the purpose of using route('next') within ExpressJS?

"Angular's ui-router allows for nested views with individual templates and controllers for each

Combining items in JavaScript using a shared key

An unusual phenomenon in the controller hierarchy causing issues with accessing the parent scope in AngularJS

The presented data in the HTML table is displayed in a reverse horizontal order

Issue encountered when attempting to display JSON index on individual result page

Why won't applying a binding style affect the appearance of my Vue component?

Expand Navigation Bar upon Hover

The hidden overflow property in CSS and floating elements

Error: The function could not be located

PHP not delivering a variable via AJAX

The combination of eq, parent, and index appears to be ineffective

I've noticed that the NextJs router appears to be significantly slower in comparison to React

How can I troubleshoot jQuery not functioning in iOS even though it works on Safari?