How to create a Boostrap 4 modal confirm dialog like javascript confirm

Question

I'd like to try to use the bootstrap 4 native modal to create a confirm dialog without using a plugin (bootbox, etc..) like javascript confirm window.

JS

if ( !confirm( "Are you sure?" ) ) return false; 

To do this I use this code

<div class="modal" id="confirm-modal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Modal title</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="modal-text"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal" data-response="ok">Save changes</button>
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

My goal would be to create a function to open the modal that returns true when the save changes button is pressed in order to use it as a confirm javascript

function confirmModal( txt ) {
    $('#confirm-modal').modal('show').find('.modal-text').text(txt);
    $('[data-response="ok"]').on('click', function() {
       ?? return true;
    });
}

if ( !confirmModal( "Are you sure?" ) ) return false; 

it is possible to do this, how could I do it? Thank you

Answer 1

You can create a function where you add all info you need to populate the modal and then also define callback functions for what will happen when the user clicks save or cancel.

In this example I have added the title, message and callbacks. You can also add text params for the ok and cancel buttons. I have not added any CSS styles in the demo...

function initModal(modalElem, title, message, okCallback, cancelCallback) {
  modalElem.find('.modal-title').text(title);
  modalElem.find('.modal-text').text(message);
  modalElem.show();
  
  modalElem.find('.btn-primary').on('click', function() {
    if(typeof okCallback === 'function') {
      modalElem.hide();
      okCallback();
    }
  });
  modalElem.find('.btn-secondary, .close').on('click', function() {
    if(typeof okCallback === 'function') {
      modalElem.hide();
      cancelCallback();
    }
  });
}

function yesFunc() {
  $('#status').text('Changes have been changed');
  $('#status').show();
  $('#save').show();
  // Do other saving stuff here...
  return true;
}

function noFunc() {
  $('#status').text('Changes have been discarded');
  $('#status').show();
  $('#save').show();
  // Do other cancel stuff here...
  return false;
}

var modalElem = $('#confirm-modal');

$('#save').on('click', function() {
  initModal(modalElem, 'Save modal', 'Do you want to save?', yesFunc, noFunc);
  $(this).hide();
  $('#status').hide();
});

#confirm-modal, #status {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="modal" id="confirm-modal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Modal title</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="modal-text"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal" data-response="ok">Save changes</button>
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
<button type="button" id="save">Save my changes</button>
<div id="status"></div>