Is het mogelijk om een ​​Twitter Bootstrap modal vanaf de zijkant of onderkant te laten schuiven in plaats van naar beneden te schuiven?

Momenteel wordt het modale slide-down-effect bereikt door de klasse fadetoe te voegen aan de modale div. Is het mogelijk om het effect te veranderen in schuiven vanaf de zijkant (of vanaf de onderkant) door de css te wijzigen? Ik kon online geen informatie vinden over hoe ik dit moet doen en ken niet genoeg css om dit zelf te doen.

html:

<div id='test-modal' class='modal fade hide'>
  <div>Stuff</div>
</div>

Antwoord 1, autoriteit 100%

Bootstrap 3 gebruikt nu CSS transform translate3d in plaats van CSS-overgangen voor betere animaties met GPU-hardwareversnelling.

Het gebruikt de volgende CSS (sans easing)

.modal.fade .modal-dialog {
    -webkit-transform: translate3d(0, -25%, 0);
    transform: translate3d(0, -25%, 0);
}

Hier is CSS die u kunt gebruiken om vanaf de LINKERkant in te schuiven

.modal.fade:not(.in) .modal-dialog {
    -webkit-transform: translate3d(-25%, 0, 0);
    transform: translate3d(-25%, 0, 0);
}

Let op de negatieve selector. Ik merkte dat dit nodig was om te voorkomen dat de definitie van “.modal.in .modal-dialog” interfereert. Opmerking: ik ben geen CSS-goeroe, dus als iemand dit beter kan uitleggen, voel je vrij 🙂

Hoe van verschillende kanten naar binnen te schuiven:

• top: translate3d(0, -25%, 0)
• onder: translate3d(0, 25%, 0)
• links: translate3d(-25%, 0, 0)
• rechts: translate3d(25%, 0, 0)

Als je verschillende dia-richtingen wilt mixen en matchen, kun je een klasse zoals ‘links’ toewijzen aan de modale…

<div class="modal fade left">
    ...
</div>

…en target dat dan specifiek met CSS:

.modal.fade:not(.in).left .modal-dialog {
    -webkit-transform: translate3d(-25%, 0, 0);
    transform: translate3d(-25%, 0, 0);
}

Fiddle: http://jsfiddle.net/daverogers/mu5mvba0/

BONUS– Je kunt een beetje gek worden en onder een hoek naar binnen glijden:

• linksboven: translate3d(-25%, -25%, 0)
• rechtsboven: translate3d(25%, -25%, 0)
• linksonder: translate3d(-25%, 25%, 0)
• rechtsonder: translate3d(25%, 25%, 0)

UPDATE (05/28/15): ik heb de viool geüpdatet om de alternatieve hoeken weer te geven

Als u dit in een MINDER sjabloon wilt gebruiken, kunt u BS3’s vendor-prefix mixin gebruiken (zolang deze is inbegrepen)

.modal.fade:not(.in) .modal-dialog {
    .translate3d(-25%, 0, 0);
}

Antwoord 2, autoriteit 24%

Deze informatie is verouderd. Bootstrap 3 gaat hier nu anders mee om. Bekijk het bijgewerkte antwoordals je de nieuwere versie gebruikt.

De “slide-in”-overgang wordt in feite afgehandeld door de bootstrap-css. Het wordt in het bijzonder afgehandeld door dit onderdeel:

// bootstrap.css
.modal.fade {
  top: -25%;
  -webkit-transition: opacity 0.3s linear, top 0.3s ease-out;
     -moz-transition: opacity 0.3s linear, top 0.3s ease-out;
       -o-transition: opacity 0.3s linear, top 0.3s ease-out;
          transition: opacity 0.3s linear, top 0.3s ease-out;
}
.modal.fade.in {
  top: 50%;
}

Om de overgangsrichting te wijzigen, voegt u deze stijlen toe (in uw eigenstylesheet, omdat de bootstrap css in toekomstige versies zal worden bijgewerkt). Deze zullen de bootstrap-stijlen overschrijven. Om de modal van links naar binnen te laten schuiven, probeert u:

.modal.fade {
  left: -25%;
  -webkit-transition: opacity 0.3s linear, left 0.3s ease-out;
     -moz-transition: opacity 0.3s linear, left 0.3s ease-out;
       -o-transition: opacity 0.3s linear, left 0.3s ease-out;
          transition: opacity 0.3s linear, left 0.3s ease-out;
}
.modal.fade.in {
  left: 50%;
}​

Werkende jsfiddle hier.

Als u van rechts naar links wilt overschakelen, geeft u een groot positiefpercentage op voor de modal waarvan de overgang moet plaatsvinden, en wijzigt u de laatste rustplaats van de modal in de respectieve richting.
bijv. .modal.fade { left: 200%; } ... .modal.fade.in { left: 50% };

Voorbeeld van rechts naar links.

Voorbeeld van onder naar boven.

Meer informatie over CSS Transitions hier.

Antwoord 3, autoriteit 7%

Dit is voor iemand die op zoek is naar een Bootstrap 4-oplossing:

HTML

<a class="btn btn-primary" data-toggle="modal" data-target="#modalSidePaneRight">Slide Right Panel</a>
<div class="modal fade modal-right-pane" id="modalSidePaneRight" tabindex="-1" role="dialog" aria-labelledby="sidePaneRightModal" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content rounded-0">
      <div class="modal-header">
        <h5 class="modal-title" id="sidePaneRightModal"><i class="fi fi-calender"></i> Your Modal Title</h5>
        <button type="button" class="close" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body bg-primary">
        <h1>Your Content</h1>
      </div>
    </div>
  </div>
</div>

SCSS

/*******************************
* MODAL AS LEFT/RIGHT SIDEBAR
* Add ".modal-left-pane" or ".modal-right-pane" in modal parent div, after class="modal".
*******************************/
// Modal Panel: Right
$header-nav-height: 56px;
$modal-height: calc(100vh - #{$header-nav-height});
.modal{
  &.modal-left-pane,
  &.modal-right-pane {
    .modal-dialog {
      max-width: 380px;
      min-height: $modal-height;
    }
    &.show .modal-dialog {
      transform: translate(0, 0);
    }
    .modal-content {
      min-height: $modal-height;
    }
  }
  &.modal-left-pane {
    .modal-dialog {
      transform: translate(-100%, 0);
      margin: $header-nav-height auto 0 0;
    }
  }
  &.modal-right-pane {
    .modal-dialog {
      transform: translate(100%, 0);
      margin: $header-nav-height 0 0 auto;
    }
  }
}