我如何弹出警报，询问“您确定要取消吗？”

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

以下是一些不同类型的提示的示例

$(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>

Answer 4

最简单的方法可能是简单的window.confirm('...')解决方案。

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

Answer 5

为此使用alert('Are you sure you want to delete')。或者，也许您想使用确认（“按ok确认”）。

    <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 6

您可以使用看起来不像石器时代风格的甜美警报

$('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/[email protected]/dist/sweetalert2.all.min.js" integrity="sha256-1pZ3aajcQuFEOG/veUw/WxQjAMJiCSTZo8wH+opDplY=" crossorigin="anonymous"></script>

<button>Popup</button>