how to make a transparent modal in bootstrap? - html

Question

I am using Bootstrap to create a modal. It is in a Navbar and if we click on the Login or Signup button, the modal appears. The Navbar is transparent in color unless you hover on it so that it turns white. I want the Modal to be transparent as well but it is transparent relative to the color of the Navbar which is white. Say my background is red in color, the modal will appear white instead of red and I want it to look red.
Here's my 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>
Here's my CSS:
.navbar{
background-color: transparent;
}
.navbar:hover{
background-color: white;
}
.btn1:hover{
color: blueviolet;
}
.bg1{
background-color: transparent;
}
body{
background-color: tomato;
}

Answer 1

I don’t know if the background-color for your modal is getting set because you have it as a child of the navbar (you didn’t include a working snippet, so it’s not possible to see your code in action), but I tried your setup with the modal separate from the navbar and it seems to work (i.e. the modal is transparent).
I added transitions and hover effects for the background colors for the navbar and the modal so you can see it in operation.
<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>