Bootstrap. Как сделать боковое всплывающее окно (sidebar modal)?

Главная  >>  Frontend  >>  bootstrap  >>  Bootstrap. Как сделать боковое всплывающее окно (sidebar modal)?

24

Сен

Bootstrap. Как сделать боковое всплывающее окно (sidebar modal)?

Нет комментариев  , , ,  bootstrap, css, Frontend, html

В различных дизайнах и интерфейсах иногда уместно сделать модальное окно на всю высоту и прижатым к одной стороне. В статье — пример реализации этой идеи.

По большому счету всё достаточно просто:
К обычной разметке модального окна следует добавить новые классы left или right соответственно.
Html:

XHTML
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-файл:

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;
}

Действующий пример можно посмотреть по ссылке:

Много объяснений не даю — т.к. сложного, в принципе ничего нет и в действующем примере можно на практике убедиться в работоспособности.

Похожие записи