it-swarm.com.de

Richtiger Weg, um eine modale Form zu machen

Ich möchte ein modales Formular erstellen, weiß aber nicht, wie es richtig ist.

Bisher habe ich Folgendes:

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

Beachten Sie, dass ich hier class="model-footer" Anstelle des üblichen class="form-actions" Verwende. Was mir an diesem Ansatz nicht gefällt, ist, dass es am Ende eine nervige weiße Lücke gibt.

enter image description here

Gibt es eine Möglichkeit, es wie ein reguläres modales Fenster aussehen zu lassen, ohne die CSS ändern zu müssen?

1
mattosmat

Ich wollte das CSS nach Möglichkeit nicht ändern und das richtige Verhalten nur erreichen, indem ich meine divs neu anordnete oder meine Klassen änderte. Dies lässt sich jedoch am einfachsten beheben, indem Sie meinem Stylesheet Folgendes hinzufügen:

.modal form{
   margin-bottom:0;
}

Div Struktur ist wie in der Frage gepostet.

1
mattosmat

Obwohl ich die Aktualisierung auf Bootstrap-3 empfehle, gibt es einige Beispiele, wie man in Bootstrap-2 ein einfaches Modal erstellt.

http://jsfiddle.net/9RcDN/

Dies ist eine Geige eines Modals mit verschiedenen Beispielen, was im Modal zu tun ist. Sie können Ihr Modal darauf aufbauen und dann entscheiden, wie Sie Ihr Modal strukturieren und gestalten möchten.

1
Purple Penguin