javascript - 单击按钮上的自定义Java脚本确认窗口

您好，我正在尝试为确认窗口做自定义弹出窗口（因为我知道无法更改它）

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

如您所见，单击特定的div元素会产生功能。我想让弹出窗口仅在单击“是”时才在其中运行代码，而在单击“否”时不执行任何操作。

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

我正在努力实现的目标
1.我单击delete_current_form按钮
2. .popup出现，如果我单击.yes_button，则运行时.delete_current_form内部的代码

最佳答案

Confirm（）是javascript原生方法，您无法更改其行为，仍然可以处理“确定”和“取消”单击事件。

参见this提琴以了解其工作原理：

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

评论编辑：

由于您无法更改确认行为，因此可以使用自定义模式弹出窗口。由于问题是用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>