Custom Javascript подтвердить окно при нажатии кнопки

Question

Здравствуйте, я пытаюсь сделать пользовательское всплывающее окно для окна подтверждения (поскольку я знаю, что это невозможно изменить)

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

Как вы заметили, есть функция, которая создается при нажатии на указанную c div элемент. я хочу сделать всплывающее окно, чтобы запускать код только тогда, когда я нажимаю "да", и ничего не делать, когда я нажимаю "нет".

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

что я пытаюсь достичь 1. Я нажимаю кнопку удаления delete_current_form 2.. появляется всплывающее окно, и если я нажимаю .yes_button, код, который находится внутри .delete_current_form, если выполняется

Answer 1

Попробуйте ответ @ Thulasiram для создания поля подтверждения «Да» или «Нет»

Да или «Нет» для подтверждения, используя jQuery

Надеюсь, что это решит вашу проблему.

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>

Answer 2

Подтверждение () - это javascript собственный метод, вы не можете изменить его поведение, вы все равно можете обрабатывать ОК и Отмена щелкните событие .

См. эту скрипку для работы с ней:

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

Редактировать комментарий:

Поскольку вы не можете изменить поведение Подтвердить , вы можете go для пользовательского модального всплывающего окна. Поскольку вопрос помечен jQuery, я бы предложил вам использовать 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>