Button in the Joomla Toolbar should open a Modal Confirm Window

Question

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:

view.html.php

    JHtml::_('bootstrap.modal');
    JToolbarHelper::modal('modal-test', '', 'Unlock');

tmpl/default.php

    <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>
    <div class="modal-body">
        Modal content here
    </div>
    <div class="modal-footer">
        <button class="btn" type="button" data-dismiss="modal">
            <?php echo JText::_('JCANCEL'); ?>
        </button>
    </div>
</div>

(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 ^^

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;
}

2. 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>