Modal Left and Right with Bootstrap

Modal left and right with Bootstrap 4 | Modal izquierda o modal derecha con Bootstrap 4.

By: Pavel Kestefran

DEMO

Modal Left – Modal Izquierdo

HTML

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModalLeft">
Left Sidebar Modal
</button>


 <div id="myModalLeft" class="modal fade modal-left" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal left</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<p>Lorem ipsum dolor sit amet, no fugit quidam eirmod qui, tacimates argumentum ius ad. Ei has adhuc nihil. Idque lorem cu per, omnes delenit percipitur cum an, mei voluptua hendrerit ei. Qui ex justo abhorreant efficiantur. Soleat malorum cu sit.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

CSS

.modal.modal-left .modal-dialog{max-width:380px;min-height:calc(100vh - 0)}
.modal.modal-left.show .modal-dialog{transform:translate(0,0)}
.modal.modal-left .modal-content{height:calc(100vh - 0);overflow-y:auto}
.modal.modal-left .modal-dialog{transform:translate(-100%,0);margin:0 auto 0 0}


Modal Right – modal derecho

HTML

  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModalRight">  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModalRight"> Right Sidebar Modal </button>


<div id="myModalRight" class="modal fade modal-right" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal right</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<p>Lorem ipsum dolor sit amet, his vitae quaerendum ea. Ex dicam perpetua mea. Cum eu unum laudem molestiae, et mea malis fabulas. Novum minimum vel cu. Duo tollit consectetuer cu, sea alia altera erroribus et. Diam incorrupte sit ex, cu pro prima error semper.</p>

<p>Quando bonorum voluptatibus mea in. Wisi liber eu cum. Cu graece accumsan vituperatoribus cum, ea has aliquip tacimates. Soluta urbanitas vulputate sed cu, mei epicuri eligendi ea. Quo ei iisque rationibus, ad dicam legere quaestio nec.</p>

<p>In usu sanctus expetendis. Per ne oportere consequat, vim eligendi vituperata scripserit no. Vim pericula imperdiet cu. Intellegebat definitionem ne vix, vix postea scripta no. Sed scriptorem concludaturque at, vim in ipsum eleifend moderatius.</p>

<p>Labore vivendo minimum ius no, mei eligendi intellegam complectitur ne. Eros equidem volumus et mel, ei legimus deleniti complectitur qui, malorum ancillae periculis nam cu. Ut sea detraxit partiendo. Nec quodsi aperiam constituam ea, et est magna aliquid, clita vocent omittantur cu eum. Viderer pertinax maluisset ut duo. Legendos senserit dignissim est an, mei unum atomorum in. Possit efficiantur vim ad, ullamcorper consequuntur ex vix.</p>

<p>Vivendum invenire at eum, his vide mandamus ex. Cu utamur vituperatoribus vim, his an duis dolorem, iisque bonorum est te. Quo meliore ponderum sadipscing ei. Nec nihil aliquid volutpat id, graeco erroribus delicatissimi sed id, movet labores recteque eam eu. Ex per minim conceptam, clita propriae et sit.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>


CSS

.modal.modal-right .modal-dialog{max-width:380px;min-height:calc(100vh - 0)}
.modal.modal-right.show .modal-dialog{transform:translate(0,0)}
.modal.modal-right .modal-content{height:calc(100vh - 0);overflow-y:auto}
.modal.modal-right .modal-dialog{transform:translate(100%,0);margin:0 0 0 auto}
¿Te gusto el post?
¡Compártelo!

☑ Puede que también te interese:

Show modal after 3 seconds with Bootstrap
Bootstrap 4 Modal animation with animate.css
Modal Window with JQUERY