Custom Javascript confirm window on click button

Question

Hello i am trying to do custom popup for confirm window ( as i know its impossible to change that)

      $('.delete_current_form').on('click', function() {
      if( confirm("{{ 'Post will be deleted! Continue?'|trans }}") ){
        var scheduleEntryId = $(this).attr('data-id');

        if (scheduleEntryId) {
            $.get('{{ path('schedule_delete_entry', {'id': '0'}) }}'.replace('0', scheduleEntryId));
            $(this).attr('data-id', '');
        }

        $(this).parent().parent().parent().removeClass('selected_field');
        $(this).closest('.all_wrap').find('form select, form textarea').val('').change();
        $(this).closest('tr').removeClass('green_background');
        $(this).closest('.all_wrap').addClass('showing_real');
        allCounts();
      }
    });

As you noticed there is function that is made on click on specific div element. i want to make popup else where to run code only when i click yes, and do nothing when i click no.

<div class="popup">
  <div class="yes_button">YES</div>
  <div class="no_button">NO</div>
</div>

what i am trying to achieve it 1. i click on delete_current_form button 2. .popup shows up and if i click .yes_button the code that is inside .delete_current_form if runs

Mayur Patel · Accepted Answer · 2020-01-27T12:48:39.500

confirm() is javascript native method, you can't change its behavior, you can still handle Ok and Cancel click event.

See this fiddle for working of the same:

$(document).ready(function() {
  $('.delete_current_form').on('click', function() {
      if(confirm("{{ 'Post will be deleted! Continue?'|trans }}") ){
            alert("Ok clicked");
          // Do whatever you want to do when OK clicked
      }
      else{
            alert("Cancel clicked");
          // Do whatever you want to do when Cancel clicked
      }
    });
});

Comment Edit:

As you can't change the confirm behavior, you can go for a custom modal popup. As the question is tagged with jQuery I would suggest you use jquery-ui.

//Set up the dialog box
$("#myDialog").dialog({
    autoOpen  : false,
    modal     : true,
    title     : "Title",
    buttons   : {
              'Yes' : function() {
                  var textValue = $('#myTextBox').val();
                  alert('Yes clicked');
                  //Do whatever you want to do when Yes clicked
              },
              'No' : function() {
                  alert('No clicked');
                  //Do whatever you want to do when No clicked
                  $(this).dialog('close');
              }
                }
});

//Open the dialog box when the button is clicked.
$('#clickMe').click(function() {
    $("#myDialog").dialog("open");
});

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" integrity="sha256-rByPlHULObEjJ6XQxW/flG2r+22R5dKiAoef+aXWfik=" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js" integrity="sha256-KM512VNnjElC30ehFwehXjx1YCHPiQkOPmqnrWtpccM=" crossorigin="anonymous"></script>

<div id="myDialog">
    Content of the modal dialog box.
</div>

<button id="clickMe">Click Me</button>

I want to change confirm to my buttons, this won't help, but thank you for trying. — Testas Testauskas, Jan 27 '20 at 12:20
There is no way to modify confirm() behaviour, you can go for a custom popup. Check my edit. — Mayur Patel, Jan 27 '20 at 12:35

Lokesh Suman · Answer 2 · 2020-01-27T12:43:58.237

Try the @Thulasiram's answer for creating Yes or No confirm box

Yes or No confirm box using jQuery

Hope this will solve your problem.

ConfirmDialog('Are you sure');

function ConfirmDialog(message) {
  $('<div></div>').appendTo('body')
    .html('<div><h6>' + message + '?</h6></div>')
    .dialog({
      modal: true,
      title: 'Delete message',
      zIndex: 10000,
      autoOpen: true,
      width: 'auto',
      resizable: false,
      buttons: {
        Yes: function() {
          // $(obj).removeAttr('onclick');                                
          // $(obj).parents('.Parent').remove();

          $('body').append('<h1>Confirm Dialog Result: <i>Yes</i></h1>');

          $(this).dialog("close");
        },
        No: function() {
          $('body').append('<h1>Confirm Dialog Result: <i>No</i></h1>');

          $(this).dialog("close");
        }
      },
      close: function(event, ui) {
        $(this).remove();
      }
    });
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

Custom Javascript confirm window on click button

2 Answers2