Как я могу сделать предупреждение, которое спрашивает: «Вы уверены, что хотите отменить?»

Question

В настоящее время у меня есть этот jQuery код для моей кнопки отмены

$('#cancel').click(function () {
    $('#edit').show();
    $('#savechanges, #cancel').hide();
    $("#target :input").prop("disabled", true);
});

Как я могу сделать предупреждение, если я нажму кнопку отмены? Я знаю, что это просто, но я просто хочу научиться.

Answer 1

Вы можете использовать предупреждение confirm, чтобы убедиться, что пользователь подтверждает свои действия, прежде чем приступить к коду, который вы хотите для события отмены.

$('#cancel').click(function() {
  if (confirm('Are you sure?')) {
    $('#edit').show();
    $('#savechanges, #cancel').hide();
    $("#target :input").prop("disabled", true);
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="cancel">cancel</button>
<button id="savechanges">Save</button>
<div id="edit">edit</div>

Answer 2

Вы можете использовать confirm API:

if(confirm("Are you sure?"))
{
    //Ok button pressed...
}
else
{
    //Cancel button pressed...
}

Документы здесь: https://developer.mozilla.org/en-US/docs/Web/API/Window/confirm

Кнопка "ОК" и "Отмена" не может быть измените текст на Да / Нет или что-либо еще, что работает в кросс-браузер Если вы хотите, вы можете найти плагин jquery для пользовательского создания диалога для собственного.

Answer 3

Вы можете использовать сладкое оповещение, которое не похоже на стиль каменного века

$('button').click(function(){

Swal.fire({
  title: 'Are you sure?',
  text: "You won't be able to revert this!",
  icon: 'warning',
  showCancelButton: true,
  confirmButtonColor: '#3085d6',
  cancelButtonColor: '#d33',
  confirmButtonText: 'Yes, delete it!'
}).then((result) => {
  if (result.value) {
    Swal.fire(
      'Deleted!',
      'Your file has been deleted.',
      'success'
    )
  }
})
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@9.7.1/dist/sweetalert2.all.min.js" integrity="sha256-1pZ3aajcQuFEOG/veUw/WxQjAMJiCSTZo8wH+opDplY=" crossorigin="anonymous"></script>

<button>Popup</button>

Answer 4

используйте alert('Are you sure you want to delete') для этого. Или, может быть, вы хотите использовать подтверждение («нажмите ОК для подтверждения»).

    <script>
    function myFunction() {
      var txt;
      var r = confirm("Press a button!");
  //alert("Hello\nHow are you?");

      if (r == true) {
        txt = "You pressed OK!";
//write you own functionality here.

      } else {
        txt = "You pressed Cancel!";
      }

    }
    </script>

Answer 5

Самым простым способом может быть простое решение window.confirm('...').

https://developer.mozilla.org/en-US/docs/Web/API/Window/confirm

Answer 6

Вот несколько примеров подсказок для разных типов

$(function() {

  $("[data-confirm]").on("click", function(){
      return confirm($(this).data("confirm"));
  });

  $("[data-alert]").on("click", function(){
      return alert($(this).data("alert"));
  });

  $("[data-prompt]").on("click", function(){
      return prompt($(this).data("prompt"));
  });
  
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button data-confirm="Confirm!">Window.confirm()</button>
<button data-alert="Alert!">Window.alert()</button>
<button data-prompt="Prompt!">Window.prompt()</button>