Простой диалог подтверждения JQuery/Javascript.

Я искал альтернативу javascript «подтвердить (вы уверены?)» по умолчанию.

Давайте установим сцену:

Это была темная и штормливая ночь…

Простой веб-сайт хотел удалить какой-то элемент из таблицы. Но разработчику нужно было подтвердить этот шаг, прежде чем позволить пользователю сделать что-то потрясающее!

Когда на улице лил дождь. Напряжение росло. От удара грома сотряслись окна! И, возможно, что-то гремело в голове у разработчика!

Он понял: «Я могу использовать обратные вызовы для передачи любой функции…»

Собираем кнопку быстрого тестирования:

$("#show-message").click(function(){
    messageConfirm($("#show-message"), removeShowMessage);
});

Наш бесстрашный разработчик доказал, что клавиатура сильнее меча!

Еще одной маленькой функцией он доказал, что покажет этой ужасной кнопке, кто в доме хозяин!

function removeShowMessage(_jElement){
    _jElement.remove();
}

Внезапно... Отбой... КАК?! Как вы динамически создаете диалоговое окно пользовательского интерфейса?

Он понял, что простое добавление поможет! Затем прикрепите прослушиватель к каждой кнопке.

function messageConfirm(_jElement, callback){
    var confirmationMessage = '<div>Are you sure? <button class="confirm">YES</button><button class="cancel">NO</button>';
 $("#message").html(confirmationMessage).fadeIn("slow", function(){
  $("#message button.confirm").click(function(){
   console.log("Confirmed.");
   callback(_jElement);
   clearMessage();
  });
  $("#message button.cancel").click(function(){
   console.log("Cancelled.");
   clearMessage();
  });
 });
}

И, наконец, избавиться даже от мысли об этой противной кнопке «Показать сообщение»…

function clearMessage(){
    $("#message").fadeOut("slow");
}

Недолгими были труды и хлопоты этого озадачивающего и в целом раздражающего облегчения подтверждения по умолчанию. Но в итоге разработчик всегда побеждает!

Почему это круто:

Во-первых, этот шаблон позволит отслеживать объект jQuery, с которым мы хотим действовать. Во-вторых, мы можем отправить любую функцию обратного вызова в команду confirmMessage. Эти два действия допускают большое разнообразие в использовании. Скажем, нам нужно загрузить какой-то новый JSON или обновить какой-нибудь JSON. после подтверждения удаления объекта. Это позволит нам выполнять сложную функциональность для любых элементов страницы с помощью всего нескольких функций.

Вот JS Fiddle, чтобы подтвердить концепцию»: https://jsfiddle.net/jroel/b1ohm3ya/3/

Удачного программирования!