Right way to make a modal form

Question

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.

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

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

Answer 2

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.