JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-2.2.1.min.js&quot;   integrity=&quot;sha256-gvQgAFzTH6trSrAWoH1iPo9Xc96QxSZ3feW6kem+O00=&quot;   crossorigin=&quot;anonymous&quot;"></script>
<div>
  <a id="openModal" href="#">Open Modal</a>
  <div id="modal" class="hidden">
    <button id="button1Id" type="button">
      OK
    </button>
    <button id="button2Id" type="button">
      Cancel
    </button>
  </div>
</div>

CSS

.hidden {
  display: none;
  visibility: hidden;
}

.visible {
  display: normal;
  visibility: true;
}

JavaScript

function openModal() {
	var modal = $("#modal")
  modal.removeClass("hidden").addClass("visible");
  return handleButtonsWithPromise().then(function (result) {
    console.log(result);
  	modal.removeClass("visible").addClass("hidden");  
	})
}

$(function () {
	$("#openModal").click(openModal);
})

function handleButtonsWithPromise() {
    var button1 = $("#button1Id");
    var button2 = $("#button2Id");
    //ES6 Promise API; others exist, including jquery deferred.
    return new Promise( function(resolve, reject) {
        var onButton1Click = function (event) {
            //...;
            resolve(true); //resolves the promise with the value of true;
            button1.off('click', '**', onButton1Click); //clean up event handlers if necessary
            button2.off('click', '**', onButton2Click); //clean up event handlers if necessary
        }; 

        var onButton2Click = function (event) {
            //...;
            resolve(false); //resolves the promise with false;
            button1.off('click', '**', onButton1Click); //clean up event handlers if necessary
            button2.off('click', '**', onButton2Click); //clean up event handlers if necessary
        };

        button1.on('click', onButton1Click);
        button2.on('click', onButton2Click);
    });
}