<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"><!-- Button trigger modal --> <h2>Modal Promise Example</h2> <p>Launch the modal and click one of the buttons on the modal (or click off the modal).</p> <p>The corresponding output is shown in the console log</p> <button type="button" class="btn btn-primary btn-lg" onclick="StartPromise()"> Launch demo modal </button> <!-- Modal --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="myModalLabel">Modal title</h4> </div> <div class="modal-body"> </div> <div class="modal-footer"> <button id="btnClose" type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button id="btnSave" type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div> </div>

function StartPromise() { let myFirstPromise = new Promise((resolve, reject) => { // We call resolve(...) when what we were doing async succeeded, and reject(...) when it failed. // In this example, we use setTimeout(...) to simulate async code. // In reality, you will probably be using something like XHR or an HTML5 API. $("#btnSave").click(function(){resolve('yay');}); $('#myModal').on('hidden.bs.modal', function (e) { reject('boo'); }) $('#myModal').modal('show'); }); myFirstPromise.then((successMessage) => { // successMessage is whatever we passed in the resolve(...) function above. // It doesn't have to be a string, but if it is only a succeed message, it probably will be. console.log(successMessage); $('#myModal').modal('hide'); }).catch((reason) => { console.log(reason); $('#myModal').modal('hide'); }); }