How can I add a Dismiss Button to a Webform Modal Conformation?

Question

I added an extra close button to my webform confirmation modal in a Bootstrap 4 theme:

<button class="btn btn-primary" data-dismiss="modal" id="button-close-modal" type="button">OK</button>

Then I added a script to act on that button, but it doesn't seem to do anything:

(function($) {
  Drupal.behaviors.hideModal = {
    attach: function(context, settings) {
        $('#button-close-modal', context).on('click', function(e){
            $('.webform-confirmation-modal', context).modal('hide');
        });
    }  
  };
})(jQuery);

Nothing in the console to give me a clue as to what may be happening. I tried .modal('toggle') and that didn't work either (although at least I could visually see a change).

I also tried $('.ui-dialog-titlebar-close', context).click();, but that didn't work either.

Note: I have the "Webform Bootstrap" module enabled.

Answer 1

Here is how I got it working:

(function($) {
  Drupal.behaviors.hideModal = {
    attach: function(context, settings) {
        $('body', context).on('click', '#button-close-modal', function(e){
            $('.webform-confirmation-modal--content', context).dialog('close');
        });
    }  
  };
})(jQuery);