Front end editing opening in a modal

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') ?>

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?

  • The gif you provided was very small so I couldn't make out the inspector properly, but have you tried adding the button without the close and novalidate classes? It's possible Joomla has it's own event handlder that target these classes
    – Lodder
    Nov 24, 2018 at 19:14
  • @Lodder yes I have done so. But you're right I think there may be a Joomla! Class. Let me investigate.
    – Eoin
    Nov 24, 2018 at 19:39
  • The code is in the question too. But the top header has this close and it's identical code which is why I tried it.
    – Eoin
    Nov 24, 2018 at 19:40
  • @Eoin So the issue is only that the button is disabled by Joomla? In other words, if you can manage to enable the button via your browser's developer tools, it will work as desired? So the solution is to find the Joomla code that targets the Cancel button -- I assume we are hunting for a JQuery selector -- then refine the selector with a deliberate :not() condition, right? Nov 25, 2018 at 1:10
  • 1
    This isn't a Joomla issue. This question has been answered here: stackoverflow.com/questions/15249678/…
    – Sharky
    Nov 25, 2018 at 11:49


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Browse other questions tagged or ask your own question.