2

I want to create a modal form, but I don't know what the right way is.

So far, I have this:

<a href="#mod_f_a" role="button" class="btn" data-toggle="modal"><?php echo JText::_('COM_SMART_NEW_A') ?></a>

<div class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="mod_f_a" aria-hidden="true">
    <form class="form-horizontal" name="form_a" id="form_a" method="post" action="<?php echo JRoute::_('index.php?option=com_smart' ); ?>">
        <div class="modal-header">
            some header
        </div>
        <div class="modal-body">
            some form fields
        </div>
        <div class="modal-footer">
            <button class="btn" data-dismiss="modal" aria-hidden="true"><?php echo JText::_('COM_SMART_CLOSE') ?></button>
            <button type="submit" class="btn btn-primary"><?php echo JText::_('COM_SMART_SAVE') ?></button>
        </div>
    </form>
</div>

Notice that here I'm using class="model-footer", instead of the usual class="form-actions". What I don't like about this approach is that there is an annoying white gap in the end.

enter image description here

Is there any way I can make it look like a regular modal window without having to change the css?

2
  • The footer of a modal should always be at the bottom with no white space unless specified in the CSS. So I can only imagine there is something overriding the styling for the modal. Without a preview or the code, it's hard to tell
    – Lodder
    Jun 4, 2015 at 8:10
  • @Lodder: Should, but it isn't. It seems the default behavior for a form is to add a 15-pixel margin at the bottom, and the documentation doesn't have an example for modal forms. I made a quick change to the CSS overriding this. Posted the code below. Thanks anyway.
    – mattosmat
    Jun 5, 2015 at 12:38

2 Answers 2

1

Even though I recommend updating to bootstrap-3, there are several examples on how to do a simple modal in bootstrap-2.

http://jsfiddle.net/9RcDN/

This is a fiddle of a modal with different examples on what to do in the modal. You can base your modal off of it, and then decide how you want to structure and design your modal.

2
  • As far as I know, bootstrap-2 is the official implementation for Joomla! 3.x. I don't know how to upgrade and I don't want to break anything.
    – mattosmat
    Jun 5, 2015 at 12:29
  • I forgot to mention my question deals with forms specifically, not just a modal window -the latter works just fine.
    – mattosmat
    Jun 5, 2015 at 12:39
1

I wanted not to change the CSS if possible, and to accomplish the right behavior only by rearranging my divs or modifying my classes. However, it seems the easiest way to fix this is by adding the following to my stylesheet:

.modal form{
   margin-bottom:0;
}

Div structure is as posted in the question.

Your Answer

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

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