xxxxxxxxxx1
<!-- GDPR Modal -->2
<span id="dpl-mdb5-cookies-modal">3
<div class="modal-dialog shadow-1-strong modal-frame modal-bottom">4
<div class="modal bottom fade" data-mdb-modal-non-invasive="true" id="gdpr_basic" tabindex="-1" aria-labelledby="gdpr_basic" aria-hidden="true" data-mdb-backdrop="false" data-gtm-vis-first-on-screen-2340190_1302="733" data-gtm-vis-total-visible-time-2340190_1302="100" data-gtm-vis-has-fired-2340190_1302="1">5
<div class="modal-dialog modal-frame modal-bottom">6
<div class="modal-content rounded-0">7
<div class="modal-body">8
<div class="d-lg-flex">9
<p class="pt-3 pe-2 my-cookie-pf my-cookie-p">10
Društvo Henosis uporablja piškotke za izboljšanje uporabniške izkušnje in za spremljanje11
</p>12
<div class="d-flex align-items-center gap-3">13
<button class="btn btn-light" id="gdpr_btn_adjust">Settings<i14
class="fas fa-book ms-1"></i>15
</button>16
<button class="btn btn-primary" data-mdb-dismiss="modal" aria-label="Close" id="gdpr_btn_full_agree">Agree17
<i class="fa fa-check ms-1">18
</i>19
</button>20
21
</div>22
</div>23
</div>24
</div>25
<!-- /.GDPR Modal -->26
<!-- Modal -->27
<div class="modal top fade" id="gdpr_adjust" aria-hidden="true" data-mdb-backdrop="false">28
<div class="modal-dialog modal-lg modal-dialog-centered">29
<div class="modal-content">30
<div class="modal-header">31
<h5 class="modal-title" id="exampleModalLabel">Piškotki in zasebnost</h5>32
<button type="button" class="btn-close" data-mdb-dismiss="modal" aria-label="Close"></button>33
</div>34
<div class="modal-body">35
<p>36
<strong>Nastavitve piškotkov37
</strong>38
</p>39
<form action="#" id="gdpr_adjust_form">40
<table class="table">41
<thead>42
<tr>43
<th>Storitve44
</th>45
<th>Zakaj uporabljajo piškotki?46
</th>47
<th>Potrdi48
</th>49
</tr>50
</thead>51
<tbody>52
<tr>53
<td>Nujni piškotki54
</td>55
<td>Tovrstni piškotki 56
57
</td>58
<td>59
<div class="switch">60
<label>61
Ne62
<input type="checkbox" name="gdpr_mandatory" checked="checked" disabled>63
<span class="lever">64
</span>65
Ja66
</label>67
68
</div>69
</td>70
</tr>71
<tr>72
<td>Funkcionalni piškotki73
</td>74
<td>Tovrstni piškotki75
76
</td>77
<td>78
<div class="switch">79
<label>80
Ne81
<input type="checkbox" name="gdpr_functional" checked="checked">82
<span class="lever">83
</span>84
Ja85
</label>86
</div>87
</td>88
</tr>89
<tr>90
<td>Google analitika91
</td>92
<td>Tovrstne piškotke 93
94
</td>95
<td>96
<div class="switch">97
<label>98
Ne99
<input type="checkbox" checked="checked" name="gdpr_ga">100
<span class="lever">101
</span>102
Ja103
</label>104
</div>105
</td>106
</tr>107
<tr>108
<td>Marketing109
</td>110
<td>Tovrstni piškotki 111
112
</td>113
<td>114
<div class="switch">115
<label>116
Ne117
<input type="checkbox" checked="checked" name="gdpr_fbp">118
<span class="lever">119
</span>120
Ja121
</label>122
</div>123
</td>124
</tr>125
</tbody>126
</table>127
<div class="footer d-flex justify-content-end me-4 mb-4">128
<button type="submit" class="btn btn-primary">Save <i class="far fa-save ms-1"></i></button>129
</div>130
</form>131
</div>132
</div>133
</div>134
</div>135
</div>136
</div>137
</div>138
</span>139
140
<div141
class="toast text-white"142
id="toast"143
role="alert"144
aria-live="assertive"145
aria-atomic="true"146
data-mdb-autohide="true"147
data-mdb-color="info"148
>149
<div class="toast-header text-white">150
<strong class="me-auto">MDBootstrap</strong>151
<small>11 mins ago</small>152
<button type="button" class="btn-close btn-close-white" data-mdb-dismiss="toast" aria-label="Close"></button>153
</div>154
<div class="toast-body">Toast offset</div>155
</div>xxxxxxxxxx1
.my-cookie-p {2
font-size:.9rem;3
}4
.my-cookie-pf {5
flex:4;6
}7
8
.switch label {9
cursor: pointer; }10
.switch label input[type="checkbox"] {11
opacity: 0;12
width: 0;13
height: 0; }14
.switch label input[type="checkbox"]:checked + .lever {15
background-color: #99caff; }16
.switch label input[type="checkbox"]:checked + .lever:after {17
left: 1.5rem;18
background-color: #1266F1; }19
.switch label input[type=checkbox]:checked:not(:disabled) ~ .lever:active:after {20
box-shadow: 0 0.0625rem 0.1875rem 0.0625rem rgba(0, 0, 0, 0.4), 0 0 0 0.9375rem rgba(170, 102, 204, 0.1); }21
.switch label input[type=checkbox]:not(:disabled) ~ .lever:active:after {22
box-shadow: 0 0.0625rem 0.1875rem 0.0625rem rgba(0, 0, 0, 0.4), 0 0 0 0.9375rem rgba(0, 0, 0, 0.08); }23
.switch label input[type="checkbox"]:disabled + .lever {24
cursor: default; }25
.switch label input[type="checkbox"]:disabled + .lever:after,26
.switch label input[type="checkbox"]:disabled:checked + .lever:after {27
background-color: #bdbdbd; }28
.switch label .lever {29
position: relative;30
display: inline-block;31
margin: 0 1rem;32
margin-right: 0.900rem;33
margin-left: 0.100rem;34
vertical-align: middle;35
content: "";36
background-color: #818181;37
border-radius: 0.9375rem;38
width: 2.5rem;39
height: 0.9375rem;40
-webkit-transition: background 0.3s ease;41
transition: background 0.3s ease; }42
.switch label .lever:after {43
position: absolute;44
top: -0.1875rem;45
left: -0.3125rem;46
display: inline-block;47
content: "";48
background-color: #f1f1f1;49
border-radius: 1.3125rem;50
box-shadow: 0 0.0625rem 0.1875rem 0.0625rem rgba(0, 0, 0, 0.4);51
width: 1.3125rem;52
height: 1.3125rem;53
-webkit-transition: left 0.3s ease, background 0.3s ease, box-shadow 1s ease;54
transition: left 0.3s ease, background 0.3s ease, box-shadow 1s ease; }55
56
.switch {57
min-width: 123px;58
}xxxxxxxxxx1
const gdprModalBasic = document.getElementById('gdpr_basic')2
const gdprModalBasicInstance = new mdb.Modal(gdprModalBasic)3
const gdprModalAdjust = document.getElementById('gdpr_adjust')4
const gdprModalAdjustInstance = new mdb.Modal(gdprModalAdjust)5
6
document.addEventListener("DOMContentLoaded", function () {7
if (document.cookie.indexOf("gdpr_mandatory=") == -1) {8
gdprModalBasicInstance.show()9
}10
});11
12
document.querySelector('#gdpr_btn_full_agree').addEventListener('click', function (e) {13
e.preventDefault();14
var date = new Date();15
date = new Date(date.getTime() + 1000 * 60 * 60 * 24 * 365);16
document.cookie = "gdpr_mandatory=1; expires=" + date.toGMTString() + "; path=/";17
document.cookie = "gdpr_functional=1; expires=" + date.toGMTString() + "; path=/";18
document.cookie = "gdpr_ga=1; expires=" + date.toGMTString() + "; path=/";19
document.cookie = "gdpr_fbp=1; expires=" + date.toGMTString() + "; path=/";20
gdprModalBasicInstance.hide();21
});22
23
document.querySelector('#gdpr_btn_adjust').addEventListener('click', function (e) {24
gdprModalAdjustInstance.show();25
});26
27
document.querySelector('#gdpr_adjust_form').addEventListener('submit', function (e) {28
e.preventDefault();29
e.target.querySelectorAll('input[type="checkbox"]').forEach(function (element) {30
var fieldName = element.dataset.name;31
var fieldValue = element.checked ? 1 : 0;32
var date = new Date();33
date = new Date(date.getTime() + 1000 * 60 * 60 * 24 * 365);34
document.cookie = fieldName + "=" + fieldValue + "; expires=" + date.toGMTString() + "; path=/;";35
}) 36
const instance = mdb.Toast.getInstance(document.getElementById('toast'));37
instance.show();38
gdprModalAdjustInstance.hide()39
}); Console errors: 0