Why can't I use a modal close button in the Joomla! modal body?

Question

I have managed to get front end editing opening in a modal. Which is pretty useful in my opinion. However the cancel button is irrelevant in this situation. In the normal operation it cancels editing and takes you back to the original page/article without the edit window. As I am now using the edit window on the same page I only need to close the modal to achieve the same thing.

The modal close button top right works as expected. But I want the cancel button to also take on this behaviour.

If I make the cancel button like so it does not work.

<div class="btn-group">
  <button type="button" class="btn close novalidate" data-dismiss="modal">
    <span class="icon-cancel"></span><?php echo JText::_('JCANCEL') ?>
  </button>
</div>

The other modal close button has the classes close and novalidate but I expect the more important part is the data-dismiss="modal". Although that works well in a codepen of a bootstrap modal, if I use that code anywhere in the modal body in Joomla! it does not work. Initially I thought it might be a Joomla! toolbar issue but it doesn't work anywhere in the modal body at all.

Does anyone know why, or can anyone point me to a good methodology to troubleshoot this?