xxxxxxxxxx
1
<div class="sidebar">
2
<ul class="menu">
3
<li>
4
<a>Modales</a>
5
<ul>
6
<li data-toggle="modal" data-target="#ModalPDF"><a>Mostrar PDF 1</a></li>
7
<li data-toggle="modal" data-target="#ModalPDF"><a>Mostrar PDF 2</a></li>
8
<li data-toggle="modal" data-target="#ModalPDF"><a>Mostrar PDF 3</a></li>
9
<li data-toggle="modal" data-target="#ModalPDF"><a>Mostrar PDF 4</a></li>
10
<li data-toggle="modal" data-target="#ModalPDF"><a>Mostrar PDF 5</a></li>
11
<li data-toggle="modal" data-target="#ModalPDF"><a>Mostrar PDF 6</a></li>
12
</ul>
13
</li>
14
</ul>
15
</div>
16
17
<div class="modal fade" id="ModalPDF" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
18
aria-hidden="true">
19
<div class="modal-dialog modal-fluid modal-notify modal-info" role="document">
20
<!--Content-->
21
<div class="modal-content">
22
<!--Header-->
23
<div class="modal-header">
24
<p class="heading lead">Modal PDF</p>
25
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
26
<span aria-hidden="true" class="white-text">×</span>
27
</button>
28
</div>
29
30
<!--Body-->
31
<div class="modal-body">
32
33
<object class="PDFdoc" width="100%" height="500px" type="application/pdf" data="https://www.antennahouse.com/XSLsample/pdf/sample-link_1.pdf"></object>
34
</div>
35
36
<!--Footer-->
37
<div class="modal-footer justify-content-center">
38
<a type="button" class="btn btn-info">Descargar <i class="far fa-file-pdf ml-1 text-white"></i></a>
39
<a type="button" class="btn btn-outline-info waves-effect" data-dismiss="modal">Cerrar <i class="fas fa-times ml-1"></i></a>
40
</div>
41
</div>
42
<!--/.Content-->
43
</div>
44
</div>
xxxxxxxxxx
1
/* width */
2
::-webkit-scrollbar {
3
width: 12px;
4
display: none;
5
}
6
7
.menu ::-webkit-scrollbar {
8
display: table;
9
}
10
11
/* Track */
12
::-webkit-scrollbar-track {
13
background: #333;
14
}
15
16
/* Handle */
17
::-webkit-scrollbar-thumb {
18
background: #007174;
19
border-radius: 30px;
20
}
21
22
/* Handle on hover */
23
::-webkit-scrollbar-thumb:hover {
24
background: #149c7e;
25
}
26
27
.sidebar {
28
width: 250px;
29
height: 100%;
30
position: fixed;
31
background: #444;
32
color: white;
33
outline: 1px solid #2a2a2a;
34
z-index: 2;
35
}
36
37
.sidebar a {
38
color: white;
39
text-decoration: none;
40
display: inline;
41
padding: 10px;
42
}
43
44
.sidebar ul {
45
list-style: none;
46
padding: 0px;
47
width: 251px;
48
}
49
50
.sidebar li {
51
outline: 1px solid #2a2a2a;
52
transition: border 0.5s;
53
}
54
55
.sidebar li:hover {
56
background: #555;
57
border-left: 5px solid #eee;
58
}
59
60
.sidebar i {
61
text-align: center;
62
margin: auto;
63
}
64
65
66
67
.modal-dialog.modal-notify.modal-utxj .modal-header {
68
background-color: #149c7e; }
69
70
.modal-dialog.modal-notify.modal-utxj .fas, .modal-dialog.modal-notify.modal-utxj .fab, .modal-dialog.modal-notify.modal-utxj .far {
71
color: #149c7e; }
72
73
.modal-dialog.modal-notify.modal-utxj .badge {
74
background-color: #149c7e; }
75
76
.modal-dialog.modal-notify.modal-utxj .btn .fas, .modal-dialog.modal-notify.modal-utxj .btn .fab, .modal-dialog.modal-notify.modal-utxj .btn .far {
77
color: #fff; }
78
79
.modal-dialog.modal-notify.modal-utxj .btn.btn-outline-utxj .fas, .modal-dialog.modal-notify.modal-utxj .btn.btn-outline-utxj .fab, .modal-dialog.modal-notify.modal-utxj .btn.btn-outline-utxj .far {
80
color: #149c7e; }
81
82
.menu {
83
padding: 0;
84
list-style: none;
85
width: 250px;
86
font-size: 18px;
87
background: #c1c1c1;
88
border: 1px solid rgba(0, 0, 0, 0.8);
89
}
90
91
.menu li ul{
92
width: 243px;
93
}
94
95
.menu li a {
96
display: block;
97
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
98
border-top: 1px solid rgba(255, 255, 255, 0.2);
99
background: #3e3f44;
100
text-decoration: none;
101
color: #fff;
102
text-shadow: 1px 0px 1px rgba(0, 0, 0, 0.2);
103
filter: dropshadow(color=#000, offx=1, offy=0);
104
padding: 10px;
105
padding-left: 20px;
106
}
107
108
.menu li ul li a {
109
font-size: 14px;
110
width: 243px;
111
color: #fff;
112
text-shadow: 1px 0px 1px rgba(255, 255, 255, 0.5);
113
}
114
115
.menu li a:hover {
116
background: #149c7e;
117
-moz-transition: background 0.3s ease-in;
118
-webkit-transition: background 0.3s ease-in;
119
-o-transition: background 0.3s ease-in;
120
}
121
122
.menu ul {
123
margin: 0;
124
padding: 0;
125
list-style: none;
126
height: 0;
127
overflow: hidden;
128
transition: 0.3s;
129
-moz-transition: 0.3s;
130
-webkit-transition: 0.3s;
131
}
132
133
.menu li:hover ul {
134
height: 170px;
135
width: 243px;
136
overflow-y: auto;
137
overflow-x: hidden;
138
}
139
140
141
142
.menu ul li a {
143
background: #333;
144
}
145
146
.menu ul li a:hover {
147
background: #024d3c repeat scroll 0 0;
148
color: #fff;
149
-moz-transition: color 0.4s ease;
150
-webkit-transition: color 0.4s ease;
151
-o-transition: color 0.4s ease;
152
}
1
1
Console errors: 0