如何在 bootstrap 中制作透明模态？

Question

我正在使用 Bootstrap 创建模态框。它位于导航栏中，如果我们单击“登录”或“注册”按钮，就会出现模态。 Navbar 的颜色是透明的，除非您将鼠标悬停在它上面使其变为白色。我希望 Modal 也是透明的，但它相对于白色的导航栏颜色是透明的。假设我的背景是红色的，模态框将显示为白色而不是红色，我希望它看起来是红色的。

这是我的模态

<!--Login-->
 <li class="nav-item">
    <div class="col-md-auto col-sm-auto col-auto" style="margin: 1vw;">
        <!-- Button trigger modal -->
        <button type="button" class="btn btn1" data-bs-toggle="modal" data-bs-target="#LoginModal">
            Login
        </button>

        <!-- Modal -->
        <div class="modal fade" id="LoginModal" tabindex="-1" aria-labelledby="LoginModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header text-dark bg1">
                        <h5 class="modal-title" id="LoginModalLabel">Login</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body text-dark bg1">
                        <!--Form-->
                        <form>
                            <div class="mb-3">
                                <label for="exampleInputEmail1" class="form-label">Email
                                    address</label>
                                <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
                                <div id="emailHelp" class="form-text">We'll never share your email
                                    with anyone else.</div>
                            </div>
                            <div class="mb-3">
                                <label for="exampleInputPassword1" class="form-label">Password</label>
                                <input type="password" class="form-control" id="exampleInputPassword1">
                            </div>
                            <div class="mb-3 form-check">
                                <input type="checkbox" class="form-check-input" id="exampleCheck1">
                                <label class="form-check-label" for="exampleCheck1">Check me
                                    out</label>
                            </div>
                            <button type="submit" class="btn btn-primary" data-bs-dismiss="modal">Submit</button>
                        </form>
                    </div>
                    <div class="modal-footer text-dark bg1">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</li>

这是我的 CSS:

.navbar{
    background-color: transparent;
}
.navbar:hover{
    background-color: white;

}
.btn1:hover{
    color: blueviolet;
}
.bg1{
    background-color: transparent;
}
body{
    background-color: tomato;
}

Answer 1

我不知道你的模式的背景颜色是否设置好了，因为你把它作为导航栏的子项（你没有包含一个工作片段，所以不可能在操作），但我尝试将模态与导航栏分开进行设置，它似乎有效（即模态是透明的）。

我为导航栏和模态框的背景颜色添加了过渡效果和悬停效果，因此您可以在操作中看到它。

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js"></script>

<style>
    body {
        background-color: tomato;
    }

    .navbar {
        background-color: transparent;
        transition: background-color 0.3s ease-in-out;
    }

    .navbar:hover {
        background-color: white;
    }

    .btn1:hover {
        color: blueviolet;
    }

    .bg1 {
        background-color: transparent;
    }

    #LoginModal .modal-content {
        background-color: transparent;
        transition: background-color 0.3s ease-in-out;
    }

    #LoginModal .modal-content:hover {
        background-color: white;
    }
</style>

<nav class="navbar navbar-expand-lg navbar-light">
    <div class="container-fluid">
        <a class="navbar-brand" href="#">Navbar</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                <li class="nav-item">
                    <a class="nav-link active" aria-current="page" href="#">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Link</a>
                </li>
                <li class="nav-item">
                    <button type="button" class="btn btn1" data-bs-toggle="modal" data-bs-target="#LoginModal">
                        Login
                    </button>
                </li>
            </ul>
        </div>
    </div>
</nav>


<!-- Modal -->
<div class="modal fade" id="LoginModal" tabindex="-1" aria-labelledby="LoginModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header text-dark bg1">
                <h5 class="modal-title" id="LoginModalLabel">Login</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body text-dark bg1">
                <!--Form-->
                <form>
                    <div class="mb-3">
                        <label for="exampleInputEmail1" class="form-label">Email
                            address</label>
                        <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
                        <div id="emailHelp" class="form-text">We'll never share your email
                            with anyone else.</div>
                    </div>
                    <div class="mb-3">
                        <label for="exampleInputPassword1" class="form-label">Password</label>
                        <input type="password" class="form-control" id="exampleInputPassword1">
                    </div>
                    <div class="mb-3 form-check">
                        <input type="checkbox" class="form-check-input" id="exampleCheck1">
                        <label class="form-check-label" for="exampleCheck1">Check me
                            out</label>
                    </div>
                    <button type="submit" class="btn btn-primary" data-bs-dismiss="modal">Submit</button>
                </form>
            </div>
            <div class="modal-footer text-dark bg1">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

如何在 bootstrap 中制作透明模态？

how to make a transparent modal in bootstrap?

html

css

bootstrap-modal

bootstrap-4

bootstrap-5