Создать пользовательскую функцию подтверждения с той же функциональностью в ванильном JavaScript - PullRequest
Новая
       41

Создать пользовательскую функцию подтверждения с той же функциональностью в ванильном JavaScript

0 голосов
/ 28 июня 2019

Я знаю, что на этот вопрос были отправлены похожие вопросы (например, Пользовательское диалоговое окно подтверждения с JavaScript ), но я все еще не могу найти прямой ответ на этот вопрос.

В настоящее время у меня в приложении confirm dialogs для множества различных событий. Я использую встроенную в браузер функцию confirm('message') для реализации моей логики, например: 

let answer = confirm('Are you sure you want to delete this?');
if(answert) { callDeleteFunction(); }

или 

let answer = confirm('Are you sure you want to add this?');
if(answer) { callAddFunction(); }

и т. Д., Но мне действительно нужно создать m y собственную функцию подтверждения с той же функциональностью . (Пример) 

let answer = customConfirm('Are you sure you want to delete this?');
if(answert) { callDeleteFunction(); }

Где функция customConfirm откроет модальное с двумя кнопками, и в зависимости от нажатой кнопки, соответствующее значение будет возвращено из функции customConfirm. Мне действительно нужна эта функциональность, так как я использую метод confirm() во многих разных местах, поэтому реализация пользовательской функции подтверждения, которая удалит принять / отклонить возвращаемое значение поля подтверждения , приведет к очень большой рефакторинг кода в моем проекте. В настоящее время я использую обратных вызовов в кнопках, но проблема здесь в том, что код не "замораживает" в ожидании ответа, подобного встроенному confirm() Функция делает.

Что я сделал до сих пор 

function openConfirmModal(message, yesCallBack, noCallBack){
  document.getElementById('confirmModal').style.display = 'block';
  document.getElementById('confirmModalText').innerHTML = message;

  let confirmModalYesBtn = document.getElementById('confirmModalYesBtn');
  confirmModalYesBtn.addEventListener('click', function(event){
    yesCallBack();
  });

  let confirmModalNoBtn = document.getElementById('confirmModalNoBtn');
  confirmModalNoBtn.addEventListener('click', function(event){
    noCallBack();
  });
}

let answer =  openConfirmModal( 'are you sure?', function () { return true; }, function () { return false; } );

// return answer; // ??
<!-- confirm modal classes and most of styling has been removed  -->
<div id="confirmModal"style="width: auto; height: auto; visibility: visible; left: 737.688px; top: 354.813px; z-index: 1025; display: none;">
    <div>
        <span>Confirmation message</span>
        <a href="#" id="confirmModalCloseBtn">
            <span></span>
        </a>
    </div>
    <div style="height: auto;">
        <span></span>
        <span id="confirmModalText"> </span>
    </div>
    <div>
        <button id="confirmModalYesBtn">
            <span></span>
            <span>Yes</span>
        </button>
        <button id="confirmModalNoBtn">
            <span></span>
            <span>No</span>
        </button>
    </div>
</div>

Проблема в том, что переменная ответа возвращается до того, как сработает какая-либо кнопка, поэтому есть ли способ (даже хитрый) «заморозить» поток JavaScript, где он ожидает нажатия любой из кнопок?

Заранее спасибо:)

...