web-dev-qa-db-fra.com

Bonne façon de faire une forme modale

Je veux créer un formulaire modal, mais je ne sais pas quelle est la bonne manière.

Jusqu'à présent, j'ai ceci:

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

Remarquez qu'ici j'utilise class="model-footer", au lieu des habituels class="form-actions". Ce que je n’aime pas dans cette approche, c’est qu’il y a finalement un trou blanc gênant.

enter image description here

Est-il possible de faire en sorte que cela ressemble à une fenêtre modale normale sans avoir à changer le fichier css?

joomla-3.xcssbootstraptwitter-bootstrap-2
1
mattosmat

Je voulais ne pas changer le CSS si possible, et accomplir le bon comportement uniquement en réarrangeant mes divs ou en modifiant mes classes. Cependant, il semble que le moyen le plus simple de résoudre ce problème consiste à ajouter les éléments suivants à ma feuille de style:

.modal form{
   margin-bottom:0;
}

La structure de la division est telle que publiée dans la question.

1
mattosmat

Bien que je recommande la mise à jour vers bootstrap-3, il existe plusieurs exemples sur la manière de réaliser un modal simple dans bootstrap-2.

http://jsfiddle.net/9RcDN/

Ceci est un violon d'un modal avec différents exemples sur ce qu'il faut faire dans le modal. Vous pouvez baser votre modal sur celui-ci, puis décider de la manière dont vous souhaitez structurer et concevoir votre modal.

1
Purple Penguin