Что-то вроде подтверждения ("Ты уверен?") JavaScript

Question

Я использую

string js = @" return confirm('Are you sure you want to do this?');"; myAspButton.OnClientClick = js;

событие возникает после нажатия кнопки "ОК", а после "Отмена" ничего не происходит

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

как реализовать свою собственную функцию, как confirm(Are you sure you want to do this?') который возвращает значение после нажатия кнопки?

мой код:

string js = @"dialog('Are you sure you want to do this?',
            function() {
                        return true;
                    },
            function() {
                        return false;
                    }
        );";

        myAspButton.OnClientClick = js;

JS код:

    function dialog(message, yesCallback, noCallback) {
        $('.title').html(message);
        var dialog = $('#modal_dialog').dialog();

        $('#btnYes').click(function() {
            dialog.dialog('close');
            yesCallback();
        });
        $('#btnNo').click(function() {
            dialog.dialog('close');
            noCallback();
        });
    }

HTML код:

<div id='modal_dialog'>
<div class='title'>
</div>
<input type='button' value='yes' id='btnYes' />
<input type='button' value='no' id='btnNo' />

Answer 1

В вашем коде есть некоторые изменения... Вы не можете связать click Событие много раз для одного и того же элемента, или оно будет срабатывать много раз, поэтому сначала вам нужно удалить привязку, чтобы добавить ее снова с другим обратным вызовом.

Кроме того, вы можете сделать "оверлей", который охватывает всю страницу, пока какая-либо кнопка не будет нажата. Увидеть css часть, чтобы посмотреть на то, что я сделал.

Посмотрите пример ниже и проверьте, что это то, что вам нужно.

$("#dialogBtn").on("click", dialog.bind(this, 'Are you Sure?', yesCallback, noCallback));

function dialog(message, yesCallback, noCallback) {
      var modal = $("#modal_dialog");
      modal.show();
      $('.title').html(message);
            
      $('#dialogBtnYes').off("click").on("click", function() {
           modal.hide()
           yesCallback.call();
      });
      $('#dialogBtnNo').off("click").on("click", function() {
            modal.hide()
            noCallback.call();
      });
}

function yesCallback(){
  console.log("YES");
}
function noCallback(){
  console.log("NO");
}

#modal_dialog{
  display: none;
  width: 100%;
  height: 100vh;
  background-color: rgba(0,0,0, 0.1);  
  z-index: 1000;
  position: absolute;
  top: 0;  
  left: 0;
}

#modal-content{
  padding: 12px;
  border: 1px solid;
  box-shadow: 1px 1px 3px black;
  background-color: #fff;
  margin: auto;
  position: relative;
  width: 50%;
  top: 50%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='button' value='Dialog' id="dialogBtn"/>

<div id='modal_dialog'>
  <div id="modal-content">
    <div class='title'></div>
    <input type='button' value='yes' id='dialogBtnYes' />
    <input type='button' value='no' id='dialogBtnNo' />
  </div>
</div>