xxxxxxxxxx
1
<div class="modal fade" id="mymodal" data-mdb-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="my modal" aria-hidden="true">
2
<div class="modal-dialog modal-dialog-scrollable modal-xl" role="document">
3
<div class="modal-content">
4
<div class="model-header">
5
Headderrr
6
</div>
7
<div class='modal-body'>
8
body
9
</div>
10
<div class="modal-footer">
11
<button class="btn btn-secondary" id='cancelMyModalBtn' type="button"
12
data-mdb-dismiss="modal">Cancel</button>
13
</div>
14
</div>
15
16
</div>
17
</div>
18
<div class='d-flex mt-2 ms-1'>
19
20
<button type="button" class="btn btn-primary" onclick="loadModal();">
21
open modal
22
</button>
23
<div class="btn-group ms-2 h-100">
24
<div class='d-flex align-items-center ms-1 me-1'>choose method: </div>
25
<input
26
type="radio"
27
class="btn-check"
28
name="options"
29
id="l1"
30
autocomplete="off"
31
checked
32
/>
33
<label class="btn btn-secondary" for="l1">Method 1 (show bad behaviour)</label>
34
35
<input type="radio" class="btn-check" name="options" id="l2" autocomplete="off" />
36
<label class="btn btn-secondary" for="l2">Method 2 - old jquery .modal (correct behave)</label>
37
38
</div>
39
</div>
40
<div class='d-flex ms-1 mt-1 text-muted'>
41
choose method (1) or (2) before you start, if already choosen method and want to change refresh the page and choose the method then start open/cancel the method, results will shown bellow:
42
</div>
43
<div class='border w-100 ms-1 mt-4 text-danger' style='background: hsl(240,40%,20%);' >
44
Console Log:
45
<div class='border ms-1 me-1 ' style='background: hsl(120,0%,70%);' id='consoleLog'>
46
</div>
47
</div>
48
<script
49
src="https://code.jquery.com/jquery-3.6.0.min.js"
50
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
51
crossorigin="anonymous"></script>
52
xxxxxxxxxx
1
.select-option:nth-child(1) > .select-option-text {
2
color: #DE3C4B;
3
}
4
5
.select-option:nth-child(2) > .select-option-text {
6
color: #1EFFBC;
7
}
8
9
.select-option:nth-child(1) {
10
background-color: #E7C8DD;
11
}
12
13
.select-option:nth-child(2) {
14
background-color: #357266;
15
}
16
17
.select-option.active:nth-child(1) {
18
background-color: #E28413;
19
}
20
21
.select-option:.active:nth-child(2) {
22
background-color: #E28413;
23
}
24
25
.select-option:nth-child(1):hover {
26
background-color: #2DE1C2;
27
}
28
29
.select-option:nth-child(2):hover {
30
background-color: #2DE1C2;
31
}
32
xxxxxxxxxx
1
window.loadModal= function() {
2
if ($('#l1').prop("checked") == true)
3
window.loadModal1();
4
else
5
window.loadModal2();
6
}
7
8
window.loadModal1 = function() {
9
let instance = mdb.Modal.getInstance(document.getElementById('mymodal'));
10
11
if (!instance) {
12
instance = new mdb.Modal(document.getElementById('mymodal'), {
13
keyboard: false
14
});
15
}
16
17
instance.show();
18
}
19
window.loadModal2 = function() {
20
$('#mymodal').modal({
21
show: true,
22
keyboard: false
23
});
24
}
25
26
$('#l1').on("change" , function() {
27
if (window.counter > 0 )
28
alert('reload the page to get correct behaviour..');
29
$('#consoleLog').html('');
30
window.counter = 0;
31
//not working
32
//window.location = "https://mdbootstrap.com/snippets/standard/sody/3279067#js-tab-view";
33
});
34
35
$('#l2').on("change" , function() {
36
if (window.counter > 0 )
37
alert('reload the page to get correct behaviour.., check the method and start');
38
$('#consoleLog').html('');
39
window.counter = 0;
40
//not working
41
//window.location = "https://mdbootstrap.com/snippets/standard/sody/3279067#js-tab-view?m2=1";
42
});
43
44
window.counter = 0;
45
46
window.loadEventListener = function() {
47
$('#mymodal').on('hidden.mdb.modal', function (e) {
48
/* also changing this to this works: */
49
/*
50
$('#mymodal').on('hidden.bs.modal', function (e) {
51
*/
52
console.log('yeaa');
53
if (window.counter > 0)
54
$('#consoleLog').append("<br>("+parseInt(window.counter+1)+") hidded");
55
else
56
$('#consoleLog').append("("+parseInt(window.counter+1)+")hidded");
57
window.counter++;
58
});
59
}
60
61
window.loadEventListener();
62
Console errors: 0