В различных дизайнах и интерфейсах иногда уместно сделать модальное окно на всю высоту и прижатым к одной стороне. В статье — пример реализации этой идеи.
По большому счету всё достаточно просто:
К обычной разметке модального окна следует добавить новые классы left или right соответственно.
Html:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<div class="modal left fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="myModalLabel">Левый сайдбар</h4> </div> <div class="modal-body"> <p>Контент</p> </div> </div><!-- modal-content --> </div><!-- modal-dialog --> </div><!-- modal --> <!-- Modal --> <div class="modal right fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel2"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="myModalLabel2">Правый сайдбар</h4> </div> <div class="modal-body"> <p>Контент</p> </div> </div><!-- modal-content --> </div><!-- modal-dialog --> </div><!-- modal --> |
Также нужно добавить новые правила в css-файл:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 |
.modal.left .modal-dialog, .modal.right .modal-dialog { position: fixed; margin: auto; 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 80px; } /* 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; } /* ----- MODAL STYLE ----- */ .modal-content { border-radius: 0; border: none; } .modal-header { border-bottom-color: #EEEEEE; background-color: #FAFAFA; } |
Действующий пример можно посмотреть по ссылке:
Много объяснений не даю — т.к. сложного, в принципе ничего нет и в действующем примере можно на практике убедиться в работоспособности.
