I’m losing my head over this modal which keeps showing up inside my side div area, I haven’t found anything about it on the bootstrp5 documentation nor on any online forums.
I just need it to render centered on the page, and the fade effect to affect all background, as per the bootstrap documentation (https://getbootstrap.com/docs/5.0/components/modal/). But I haven’t found any way to make it work…
I’m using bootstrap 5 (custom.css) with the following frontend code:
HTML:
JavaScript
x
83
83
1
<!DOCTYPE html>2
<html lang="en">3
4
<head>5
<meta charset="UTF-8" />6
<meta name="viewport" content="width=device-width, initial-scale=1.0" />7
<meta http-equiv="X-UA-Compatible" content="ie=edge" />8
9
<link href="./css/custom.css" rel="stylesheet">10
<link href="./css/navlayout.css" rel="stylesheet">11
<link href="https://cdn.jsdelivr.net/npm/boxicons@latest/css/boxicons.min.css" rel="stylesheet">12
13
<script defer src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>14
<script defer src="./js/navlayout.js"></script>15
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/js/all.min.js" crossorigin="anonymous"></script>16
17
<link rel="icon" href="./img/icon.png" />18
19
<title>Basic - Bootstrap 5 with Gulp 4</title>20
</head>21
22
<body id="body-pd" style="background: url('./img/Home e Roleta.png') no-repeat center center fixed; background-size: cover;">23
<header class="top-header align-middle">24
<div class="mx-auto"></div>25
</header>26
<header class="header" id="header">27
<div class="header_toggle" id="toggle-up"> <i class="fas fa-bars secondary-bs-color" id="header-toggle"></i></div>28
29
<div class="me-5">30
<a class=" white-bs-colorbtn btn-secondary-outline me-4" href="#" role="button" style="color: white; font-weight: bold;">Login</a>31
<a class="white-bs-color btn btn-secondary" href="#" role="button" style="color: white; font-weight: bold">Register</a>32
</div>33
</header>34
<div class="l-navbar" id="nav-bar">35
<nav class="nav">36
<div>37
<div class="nav_list">38
<!-- <a href="#" class="nav_logo"> <img src="./img/Logo Vegaz Bet MOEDA.png" width="30px" alt="" /> <span class="nav_logo-name"><img src="./img/Logo Vegaz Bet ESCRITA.png" width="100px" alt=""/></span> </a> -->39
<a href="#" class="nav_link active"> <i class="fas fa-chart-line nav_icon secondary-bs-color"></i> <span class="nav_name">Crash</span> </a>40
<a href="#" class="nav_link"> <i class="far fa-life-ring nav_icon secondary-bs-color"></i> <span class="nav_name">Roullete</span> </a>41
<a href="#" class="nav_link"> <i class="fas fa-dice nav_icon secondary-bs-color"></i> <span class="nav_name">Dice</span> </a>42
<a href="#" class="nav_link"> <i class="fas fa-coins nav_icon secondary-bs-color"></i> <span class="nav_name">Heads or Tails</span> </a>43
<hr class="bg-white border-2 border-top border-white">44
<a href="#" class="nav_link"> <i class="fas fa-hand-holding-usd nav_icon secondary-bs-color"></i> <span class="nav_name">Deposit /<br> Withdrawal</span> </a>45
<a href="#" class="nav_link"> <i class="far fa-question-circle nav_icon secondary-bs-color"></i> <span class="nav_name">Help</span> </a>46
</div>47
</div>48
49
</nav>50
</div>51
<!--Container Main start-->52
<div class="height-100">53
<h4>Main Components</h4>54
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#staticBackdrop">55
Launch static backdrop modal56
</button>57
<!-- Login modal -->58
<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">59
<div class="modal-dialog">60
<div class="modal-content">61
<div class="modal-header">62
<h5 class="modal-title" id="staticBackdropLabel">Modal title</h5>63
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>64
</div>65
<div class="modal-body">66
67
</div>68
<div class="modal-footer">69
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>70
<button type="button" class="btn btn-primary">Understood</button>71
</div>72
</div>73
</div>74
</div>75
76
<!-- Registration modal -->77
</div>78
<!--Container Main end-->79
80
</body>81
82
</html>83
Navlayout CSS:
JavaScript
1
207
207
1
@import url("https://fonts.googleapis.com/css2?family=Montserrat&display=swap");2
:root {3
--top-header-top-position: 5%;4
--header-height: 3rem;5
--nav-width: 68px;6
--primary-color: var(--bs-primary);7
--secondary-color: var(--bs-secondary);8
--white-color: #FFFFFF;9
--body-font: 'Montserrat', sans-serif;10
--normal-font-size: 1rem;11
--z-fixed: 100;12
--z-topbar: 101;13
}14
15
*,16
::before,17
::after {18
box-sizing: border-box19
}20
21
body {22
position: relative;23
margin: var(--header-height) 0 0 0;24
padding: 0 1rem;25
font-family: var(--body-font);26
font-size: var(--normal-font-size);27
transition: .5s;28
-webkit-background-size: cover;29
-moz-background-size: cover;30
background-size: cover;31
-o-background-size: cover;32
}33
34
a {35
text-decoration: none36
}37
38
.top-header {39
width: 100%;40
height: var(--top-header-top-position);41
position: fixed;42
top: 0;43
left: 0;44
display: flex;45
align-items: center;46
justify-content: space-between;47
padding: 0 1rem;48
background-color: var(--secondary-color);49
z-index: var(--z-topbar);50
transition: .5s;51
text-align: center !important;52
}53
54
.header {55
width: 100%;56
height: var(--header-height);57
position: fixed;58
top: var(--top-header-top-position);59
left: 0;60
display: flex;61
align-items: center;62
justify-content: space-between;63
padding: 0 1rem;64
background-color: var(--primary-color);65
z-index: var(--z-fixed);66
transition: .5s67
}68
69
.header_toggle {70
color: var(--primary-color);71
font-size: 1.5rem;72
cursor: pointer73
}74
75
.header_img {76
width: 35px;77
height: 35px;78
display: flex;79
justify-content: center;80
border-radius: 50%;81
overflow: hidden82
}83
84
.header_img img {85
width: 40px86
}87
88
.l-navbar {89
position: fixed;90
top: 0;91
left: -30%;92
width: var(--nav-width);93
height: 100vh;94
background-color: var(--primary-color);95
padding: .5rem 1rem 0 0;96
transition: .5s;97
z-index: var(--z-fixed)98
}99
100
.nav {101
height: 100%;102
display: flex;103
flex-direction: column;104
justify-content: space-between;105
overflow: hidden;106
margin-top: 5rem;107
}108
109
.nav_logo,110
.nav_link {111
display: grid;112
grid-template-columns: max-content max-content;113
align-items: center;114
column-gap: 1rem;115
padding: .5rem 0 .5rem 1.5rem116
}117
118
.nav_logo {119
margin-bottom: 2rem120
}121
122
.nav_logo-icon {123
font-size: 1.25rem;124
color: var(--white-color)125
}126
127
.nav_logo-name {128
color: var(--white-color);129
font-weight: 700130
}131
132
.nav_link {133
position: relative;134
color: var(--white-color);135
margin-bottom: 1.5rem;136
transition: .3s137
}138
139
.nav_link:hover {140
color: var(--white-color)141
}142
143
.nav_icon {144
font-size: 1.25rem;145
}146
147
.secondary-bs-color {148
color: var(--bs-secondary)149
}150
151
.white-bs-color {152
color: var(--white-colo)153
}154
155
.show {156
left: 0157
}158
159
.body-pd {160
padding-left: calc(var(--nav-width) + 1rem)161
}162
163
.active {164
color: var(--white-color)165
}166
167
.active::before {168
content: '';169
position: absolute;170
left: 0;171
width: 2px;172
height: 32px;173
background-color: var(--white-color)174
}175
176
.height-100 {177
height: 100vh178
}179
180
@media screen and (min-width: 768px) {181
body {182
margin: calc(var(--header-height) + 1rem) 0 0 0;183
padding-left: calc(var(--nav-width) + 2rem)184
}185
.header {186
height: calc(var(--header-height) + 1rem);187
padding: 0 2rem 0 calc(var(--nav-width) + 2rem)188
}189
.header_img {190
width: 40px;191
height: 40px192
}193
.header_img img {194
width: 45px195
}196
.l-navbar {197
left: 0;198
padding: 1rem 1rem 0 0199
}200
.show {201
width: calc(var(--nav-width) + 156px)202
}203
.body-pd {204
padding-left: calc(var(--nav-width) + 188px)205
}206
}207
JS:
JavaScript
1
55
55
1
document.addEventListener("DOMContentLoaded", function(event) {2
3
const showNavbar = (toggleId, navId, bodyId, headerId) => {4
const toggle = document.getElementById(toggleId),5
nav = document.getElementById(navId),6
bodypd = document.getElementById(bodyId),7
headerpd = document.getElementById(headerId),8
toggleup = document.getElementById("toggle-up")9
10
console.log(toggle);11
console.log(nav);12
console.log(bodypd);13
console.log(headerpd);14
15
// Validate that all variables exist16
if (toggle && nav && bodypd && headerpd) {17
toggleup.addEventListener('click', () => {18
// show navbar19
nav.classList.toggle('show')20
// change icon21
toggle.classList.toggle('fa-times')22
// add padding to body23
bodypd.classList.toggle('body-pd')24
// add padding to header25
headerpd.classList.toggle('body-pd')26
})27
console.log("EXECUTED");28
}29
30
}31
32
showNavbar('header-toggle', 'nav-bar', 'body-pd', 'header')33
34
/*===== LINK ACTIVE =====*/35
const linkColor = document.querySelectorAll('.nav_link')36
37
function colorLink() {38
if (linkColor) {39
linkColor.forEach(l => l.classList.remove('active'))40
this.classList.add('active')41
}42
}43
linkColor.forEach(l => l.addEventListener('click', colorLink))44
45
console.log("LOADED");46
47
//modal load48
var myModal = document.getElementById('staticBackdrop')49
var myInput = document.getElementById('myInput')50
51
myModal.addEventListener('shown.bs.modal', function () {52
myInput.focus()53
})54
});55
Advertisement
Answer
You add width to the .show in @media screen and (min-width: 768px) section.
And you should not do this. If you want to change the size of the modal you can set width for .modal-dialog class