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

Of course it's possible as you already know there are existing libraries out there that do this already (bootbox).. why dont you have a look how they go about it — Dale, Feb 07 '18 at 10:45

KungWaz · Answer 1 · 2018-02-07T14:32:01.060

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>

Thank you, but it's not exactly what I was looking for. The function should return true or false like javscript confirm — Paolo Rossi, Feb 07 '18 at 14:20
It will do that through the callbacks if you add it. Updated my example above. — KungWaz, Feb 07 '18 at 14:31
You can just add the code to execute in the callbacks, so if you have something in your if statement "if(initModal(...) === true" then just move that code to the yesCallback function and the else part of that statement to the noCallback function. Then you have what you want. — KungWaz, Feb 07 '18 at 15:08
Maybe you can have a look at promises, might be closer to what you are looking for, https://stackoverflow.com/questions/29134292/how-to-make-the-calling-function-wait-until-the-called-function-finishes-executi — KungWaz, Feb 08 '18 at 07:07

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

1 Answers1