模态不想打开 - Bootstrap答案

【问题标题】：Modal do not want to open - Bootstrap模态不想打开 - Bootstrap
【发布时间】：2021-11-21 04:42:22
【问题描述】：

我想让我的模态更显眼，但我做不到。这是我的代码：

<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>

这是我的模态：

<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>

如果您需要完整地查看我的项目，请前往link，或者如果您想下载项目，请前往here

【问题讨论】：

您是否将 Bootstrap js 文件添加到您的项目中？

标签： php html bootstrap-4

【解决方案1】：

您没有加载 Bootstrap 的 javascript 文件，只需添加：

 <script 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>

到您的文档的头部并且模态有效。

资源：https://getbootstrap.com/docs/5.0/components/modal/

【讨论】：

谢谢兄弟。现在它的工作！