Bootstrap modal being rendered inside side bar

javascript html css bootstrap-5 bootstrap-modal

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.

image rendering page

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:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />

    <link href="./css/custom.css" rel="stylesheet">
    <link href="./css/navlayout.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/boxicons@latest/css/boxicons.min.css" rel="stylesheet">

    <script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
    <script defer src="./js/navlayout.js"></script>
    <script defer src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/js/all.min.js" crossorigin="anonymous"></script>

    <link rel="icon" href="./img/icon.png" />

    <title>Basic - Bootstrap 5 with Gulp 4</title>
</head>

<body id="body-pd" style="background: url('./img/Home e Roleta.png') no-repeat center center fixed; background-size: cover;">
    <header class="top-header align-middle">
        <div class="mx-auto"></div>
    </header>
    <header class="header" id="header">
        <div class="header_toggle" id="toggle-up"> <i class="fas fa-bars secondary-bs-color" id="header-toggle"></i></div>

        <div class="me-5">
            <a class=" white-bs-colorbtn btn-secondary-outline me-4" href="#" role="button" style="color: white; font-weight: bold;">Login</a>
            <a class="white-bs-color btn btn-secondary" href="#" role="button" style="color: white; font-weight: bold">Register</a>
        </div>
    </header>
    <div class="l-navbar" id="nav-bar">
        <nav class="nav">
            <div>
                <div class="nav_list">
                    <!-- <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> -->
                    <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>
                    <a href="#" class="nav_link"> <i class="far fa-life-ring nav_icon secondary-bs-color"></i> <span class="nav_name">Roullete</span> </a>
                    <a href="#" class="nav_link"> <i class="fas fa-dice nav_icon secondary-bs-color"></i> <span class="nav_name">Dice</span> </a>
                    <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>
                    <hr class="bg-white border-2 border-top border-white">
                    <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>
                    <a href="#" class="nav_link"> <i class="far fa-question-circle nav_icon secondary-bs-color"></i> <span class="nav_name">Help</span> </a>
                </div>
            </div>
            
        </nav>
    </div>
    <!--Container Main start-->
    <div class="height-100">
        <h4>Main Components</h4>
        <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#staticBackdrop">
            Launch static backdrop modal
        </button>
        <!-- Login modal -->
        <div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
            <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                <h5 class="modal-title" id="staticBackdropLabel">Modal title</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                ...
                </div>
                <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Understood</button>
                </div>
            </div>
            </div>
        </div>

        <!-- Registration modal -->
    </div>
    <!--Container Main end-->

</body>

</html>

Navlayout CSS:

@import url("https://fonts.googleapis.com/css2?family=Montserrat&display=swap");
:root {
    --top-header-top-position: 5%;
    --header-height: 3rem;
    --nav-width: 68px;
    --primary-color: var(--bs-primary);
    --secondary-color: var(--bs-secondary);
    --white-color: #FFFFFF;
    --body-font: 'Montserrat', sans-serif;
    --normal-font-size: 1rem;
    --z-fixed: 100;
    --z-topbar: 101;
}

*,
::before,
::after {
    box-sizing: border-box
}

body {
    position: relative;
    margin: var(--header-height) 0 0 0;
    padding: 0 1rem;
    font-family: var(--body-font);
    font-size: var(--normal-font-size);
    transition: .5s;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}

a {
    text-decoration: none
}

.top-header {
    width: 100%;
    height: var(--top-header-top-position);
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1rem;
    background-color: var(--secondary-color);
    z-index: var(--z-topbar);
    transition: .5s;
    text-align: center !important;
}

.header {
    width: 100%;
    height: var(--header-height);
    position: fixed;
    top: var(--top-header-top-position);
    left: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1rem;
    background-color: var(--primary-color);
    z-index: var(--z-fixed);
    transition: .5s
}

.header_toggle {
    color: var(--primary-color);
    font-size: 1.5rem;
    cursor: pointer
}

.header_img {
    width: 35px;
    height: 35px;
    display: flex;
    justify-content: center;
    border-radius: 50%;
    overflow: hidden
}

.header_img img {
    width: 40px
}

.l-navbar {
    position: fixed;
    top: 0;
    left: -30%;
    width: var(--nav-width);
    height: 100vh;
    background-color: var(--primary-color);
    padding: .5rem 1rem 0 0;
    transition: .5s;
    z-index: var(--z-fixed)
}

.nav {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    margin-top: 5rem;
}

.nav_logo,
.nav_link {
    display: grid;
    grid-template-columns: max-content max-content;
    align-items: center;
    column-gap: 1rem;
    padding: .5rem 0 .5rem 1.5rem
}

.nav_logo {
    margin-bottom: 2rem
}

.nav_logo-icon {
    font-size: 1.25rem;
    color: var(--white-color)
}

.nav_logo-name {
    color: var(--white-color);
    font-weight: 700
}

.nav_link {
    position: relative;
    color: var(--white-color);
    margin-bottom: 1.5rem;
    transition: .3s
}

.nav_link:hover {
    color: var(--white-color)
}

.nav_icon {
    font-size: 1.25rem;
}

.secondary-bs-color {
    color: var(--bs-secondary)
}

.white-bs-color {
    color: var(--white-colo)
}

.show {
    left: 0
}

.body-pd {
    padding-left: calc(var(--nav-width) + 1rem)
}

.active {
    color: var(--white-color)
}

.active::before {
    content: '';
    position: absolute;
    left: 0;
    width: 2px;
    height: 32px;
    background-color: var(--white-color)
}

.height-100 {
    height: 100vh
}

@media screen and (min-width: 768px) {
    body {
        margin: calc(var(--header-height) + 1rem) 0 0 0;
        padding-left: calc(var(--nav-width) + 2rem)
    }
    .header {
        height: calc(var(--header-height) + 1rem);
        padding: 0 2rem 0 calc(var(--nav-width) + 2rem)
    }
    .header_img {
        width: 40px;
        height: 40px
    }
    .header_img img {
        width: 45px
    }
    .l-navbar {
        left: 0;
        padding: 1rem 1rem 0 0
    }
    .show {
        width: calc(var(--nav-width) + 156px)
    }
    .body-pd {
        padding-left: calc(var(--nav-width) + 188px)
    }
}

JS:

document.addEventListener("DOMContentLoaded", function(event) {

    const showNavbar = (toggleId, navId, bodyId, headerId) => {
        const toggle = document.getElementById(toggleId),
            nav = document.getElementById(navId),
            bodypd = document.getElementById(bodyId),
            headerpd = document.getElementById(headerId),
            toggleup = document.getElementById("toggle-up")

        console.log(toggle);
        console.log(nav);
        console.log(bodypd);
        console.log(headerpd);

        // Validate that all variables exist
        if (toggle && nav && bodypd && headerpd) {
            toggleup.addEventListener('click', () => {
                // show navbar
                nav.classList.toggle('show')
                    // change icon
                toggle.classList.toggle('fa-times')
                    // add padding to body
                bodypd.classList.toggle('body-pd')
                    // add padding to header
                headerpd.classList.toggle('body-pd')
            })
            console.log("EXECUTED");
        }
        
    }

    showNavbar('header-toggle', 'nav-bar', 'body-pd', 'header')

    /*===== LINK ACTIVE =====*/
    const linkColor = document.querySelectorAll('.nav_link')

    function colorLink() {
        if (linkColor) {
            linkColor.forEach(l => l.classList.remove('active'))
            this.classList.add('active')
        }
    }
    linkColor.forEach(l => l.addEventListener('click', colorLink))

    console.log("LOADED");
    
    //modal load
    var myModal = document.getElementById('staticBackdrop')
    var myInput = document.getElementById('myInput')

    myModal.addEventListener('shown.bs.modal', function () {
        myInput.focus()
    })
});

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


Further to what @MehriZareie said, you're also setting the left property of .show to 0.

So the modal isn't appearing "inside" the side bar, you've just set it to the same left co-ordinate and width as the side bar.

Related

Run DOS program from R
What, if any, is a technical reason to lead with a function pointer argument and then arguments for that function or the other way around?
Is there an equivalent to .closest() that searches down the DOM tree instead of up?
'NoneType' object has no attribute 'avatar_url' in discord.py
PCA on transposed data
Footer hides content of the div above it
Qualtrics (HTML/CSS/Java): How to create a circle with a line in the middle, text above and below the line
Generate type by object in string format in typescript [duplicate]
Database.Migrate() creating database but not tables, EF & .NET Core 2
Error "Keras requires TensorFlow 2.2 or higher"
Get data in React child component's to parent for submission
How can I parse a date including timezone with Joda Time