it-swarm.com.de

Ein- und Ausblenden eines Bootstrap 3-Modals

Ich habe meinem Bootstrap 3 Modal eine 'Fade'-Klasse gegeben, aber das Modal' fade 'nicht ein- und ausgeblendet wie ich es erwartet habe. Es scheint von oben einzurutschen, anstatt einzublenden.

Modal:

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Auslöser:

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

Um ein Beispiel zu zeigen, wie ein Fade-Effekt aussehen würde, habe ich dieses Beispiel erstellt: http://jsfiddle.net/spQp5/

Wie kann ich meinen Modal dazu bringen, so ein- und auszublenden?

8
henrywright

Bootstrap-Modals werden standardmäßig eingeblendet. Vielleicht ist es zu schnell für Sie sichtbar? Wenn Sie sich die CSS ansehen, können Sie feststellen, dass die Übergänge so eingerichtet sind, dass sie 0,15 Sekunden eingeblendet werden:

.fade {
    opacity: 0;
    -webkit-transition: opacity .15s linear;
    transition: opacity .15s linear;
}

Wenn Sie das Einblenden zu Demonstrationszwecken auf eine Sekunde ändern, zeigt dies möglicherweise an, dass es tatsächlich eingeblendet wird.

.fade {
    opacity: 0;
    -webkit-transition: opacity 1s linear;
    transition: opacity 1s linear;
}
8
david

Die Übergänge befinden sich im CSS und bewirken, dass der Modal animiert wird und nach unten rutscht. Wenn Sie LESS verwenden, können Sie diese Zeilen in modal ändern. Wenn Sie die gewünschten Transition-Mixins in den Mixins oder Component-Animations.less (oder Ihren eigenen) verwenden, können Sie das gewünschte Verhalten erzielen.

  // When fading in the modal, animate it to slide down
  &.fade .modal-dialog {
    .translate(0, -25%);
    .transition-transform(~"0.3s ease-out");
  }
  &.in .modal-dialog { .translate(0, 0)}

Wenn Sie nicht LESS oder den offiziellen Sass-Port verwenden, können Sie das kaskadierende Verhalten von Stylesheets nutzen und Ihre Überschreibung einer benutzerdefinierten CSS-Datei hinzufügen, die nach der Datei bootstrap.css geladen wird. 

 .modal.fade .modal-dialog {
      -webkit-transform: translate(0, 0);
      -ms-transform: translate(0, 0); // IE9 only
          transform: translate(0, 0);

 }
10
jme11

Geige für deinen Code: http://jsfiddle.net/KqXBM/

Sie beziehen sich auf die fadeOut-Methode von jQuery, die die Bootstrap-Klasse fade gerade nicht tut. Wenn Sie diesen Effekt erzielen möchten, verlassen Sie sich nicht auf die BS-Bibliotheken und verwenden Sie jQuery.

0
punund