Bootstrap 4: Showing A Modal Dialog Over An Existing Modal Dialog

Posted on: Wednesday, September 27th, 2017

We have decided to tutorial articles to help other web designers who may be looking for tips and tricks to improve their website.

Today’s article covers how to hide existing Bootstrap modal dialogs to show another alert-type dialog, and then reopening the dialogs once the alert dialog has been dismissed.

Here is the exact scenario.

Say your user clicks a “new customer” link on the website page and this brings up a modal dialog with a form to fill out the customer information. When validating the form, we have 2 options to display validation errors. We can either use helper text under, above or next to the field in question, but this can be a challenge when the screen space is already an issue.

The second option is to hide the current dialog, show the alert dialog, and then, when the alert dialog is dismissed, we bring back the previous customer form dialog for the user to correct their data input.

In order to achieve this, we first create a function which handles alerts. We start off by including our HTML for our Bootstrap 4 dialog:

<div id="modal-alert" class="modal">
  <div class="modal-dialog" role="dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Alert</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>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary">OK</button>
      </div>
    </div>
  </div>
</div>

Next, we need to create a handy user function to show/hide the dialog. In this function, we will first record which modal dialogs are already showing, hide them, show the alert, and then bind a function to bring forward the previous dialog(s) once the alert is dismissed.

We will also pass 2 parameters, the title and the message so that they can be added into the dialog HTML for us.

function show_alert(message,title){
    var $modal = $('#modal-alert');
    $modal.find('.modal-body').html(message);
    if(typeof title !== 'undefined'){
            $modal.find('.modal-title').text(title);
    } else{
            $modal.find('.modal-title').text('Alert');
    }
    $modal
    .on('show.bs.modal',function(){
            $('.modal.show').addClass('resume').modal('hide');
            $(this).unbind('show.bs.modal');
    })
    .on('hidden.bs.modal',function(){
            $('.modal.resume').modal('show').removeClass('resume');
            $(this).unbind('hidden.bs.modal');
    })
    .modal('show');
}

In essence, what we are doing here is adding the class “.resume” to each existing modal before creating and displaying the alert modal. Then we are hiding those modal(s). We then bind an event using hidden.bs.modal which fires when the alert dialog has been dismissed. This function shows all modals with the classes .modal.resume and then unbinds these events. You need to unbind them after they are called otherwise the function will progressively fire more and more times as the event is being bound again each time it fires. If you want to see what I mean, you can add alert(‘show.bs.modal’); to the .on(‘show.bs.modal… function and then call the show_alert() function a few times.