Modal do not want to open - Bootstrap-CodePudding

I want to make my modal apper, but I can not to do it. This is my code:

<div class="container h-100">
            <div class="row justify-content-sm-center h-100">
                <div class="col-xxl-4 col-xl-5 col-lg-5 col-md-7 col-sm-9">
                    <div class="text-center my-5">
                        <img src="img/logo-branca.png" alt="logo" width="100">
                    </div>
                    <div class="card shadow-lg">
                        <div class="card-body p-5">
                            <h1 class="fs-4 card-title fw-bold mb-4">CEP</h1>
                            <form method="POST" action = "autenticar.php">
                                <div class="mb-3">
                                    <input id="cep" type="number" class="form-control" name="cep" value="" required="required">
                                    
                                </div>
                                    <button type="submit" class="btn btn-primary ms-auto">
                                        Pesquisar
                                    </button>
                                </div>
                            </form>
                        </div>
                        <div class="card-footer py-3 border-0">
                            <div class="text-center">
                                <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#staticBackdrop">
                                    BUTTON TO OPEN THE MODAL
                                </button>
                            </div>
                        </div>
                    </div>
                    <div class="text-center mt-5 text-muted">
                        Copyright &copy; 2021 &mdash; Rodrigo Franco 
                    </div>
                </div>
            </div>
        </div>

And this my 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>

If you need to see my project compleatly, just go to this link or if you want to make download the project, just go here

CodePudding user response：

You are not loading Bootstrap's javascript files, simply add:

 <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

To the head of your document and the modal works.

Resources: https://getbootstrap.com/docs/5.0/components/modal/