Created
April 5, 2017 15:12
-
-
Save singhmohancs/d52fd31466c7e5126f3ee9d79882f100 to your computer and use it in GitHub Desktop.
Open modal as Aside - on Left , Right
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/******************************* | |
* MODAL AS LEFT/RIGHT SIDEBAR | |
* Add "left" or "right" in modal parent div, after class="modal". | |
* Get free snippets on bootpen.com | |
*******************************/ | |
.modal.left .modal-dialog, | |
.modal.right .modal-dialog { | |
position: fixed; | |
margin: auto; | |
min-width: 320px; | |
height: 100%; | |
-webkit-transform: translate3d(0%, 0, 0); | |
-ms-transform: translate3d(0%, 0, 0); | |
-o-transform: translate3d(0%, 0, 0); | |
transform: translate3d(0%, 0, 0); | |
} | |
.modal.left .modal-content, | |
.modal.right .modal-content { | |
height: 100%; | |
overflow-y: auto; | |
} | |
.modal.left .modal-body, | |
.modal.right .modal-body { | |
padding: 15px 15px 20px; | |
} | |
/*Left*/ | |
.modal.left.fade .modal-dialog{ | |
left: -320px; | |
-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.left.fade.in .modal-dialog{ | |
left: 0; | |
} | |
/*Right*/ | |
.modal.right.fade .modal-dialog { | |
right: -320px; | |
-webkit-transition: opacity 0.3s linear, right 0.3s ease-out; | |
-moz-transition: opacity 0.3s linear, right 0.3s ease-out; | |
-o-transition: opacity 0.3s linear, right 0.3s ease-out; | |
transition: opacity 0.3s linear, right 0.3s ease-out; | |
} | |
.modal.right.fade.in .modal-dialog { | |
right: 0; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment