I work on a Joomla Site View for my component with content which can be unlocked via points. In this thread I fixed my controller problem already, so now I have a simple button, and if I press it, the content is unlocked.

Now I would like to pimp this button:

If you click on it, a modal window opens with the following options:

  • Close modal window
  • Checkbox which has to be checked in order to press the
  • Confirm-Button. This button activates the controller in the end.

I saw several threads like this one, but cannot get it to work properly. It seems to be a bit outdated, not sure, but I found the method "JToolbarHelper::modal()" and thought this might enease the job:

Right now this is my code:


    JToolbarHelper::modal('modal-test', '', 'Unlock');


    <div class="modal hide fade" id="modal-test" style="width:500px;height:200px">
    <div class="modal-header">
        <button type="button" role="presentation" class="close" data-dismiss="modal">x</button>
        <h3>Modal title</h3>
    <div class="modal-body">
        Modal content here
    <div class="modal-footer">
        <button class="btn" type="button" data-dismiss="modal">
            <?php echo JText::_('JCANCEL'); ?>

(It's the code from the other thread).

Right now, the modal window opens, well, it's just not a window: http://prntscr.com/1015yb4

So here're the questions:

  1. How to fix the obvious layout problem? => SOLVED, another CSS file was interferred
  2. How to do the checkbox + button-cobi inside the modal window which loads the controller in the end?

Thx for the help ^^

1 Answer 1

  1. The Modal-Backdrop Div somehow wasnt removed if I closed the modal container as soon as I changed the opacity. This CSS helped:
.modal-backdrop.fade.in {
    opacity: 0.5 !important;
  1. Enable "Submit"-Button with Checkbox:
<input type="checkbox" onchange="document.getElementById('unlock').disabled = !this.checked;" /> ...
<button type="submit cursor-pointer" id="unlock" class="btn btn-primary" onclick="Joomla.submitbutton('...');" disabled>Unlock</button>

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.