Guide to creating a see-through modal using bootstrap?

I am currently utilizing Bootstrap to design a modal within a Navbar. When the Login or Signup buttons are clicked, the modal is displayed. The Navbar has a transparent color by default, changing to white upon hovering over it. I wish for the modal to also be transparent, but it appears white due to being relative to the Navbar's color. For example, if my background is red, the modal will appear white instead of red, and I want it to blend in with the red color scheme.

Below is the code for 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>

And here is the CSS styling I have applied:

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

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

Answer №1

It is uncertain if the background-color of your modal is being properly set because it is a child of the navbar (without a functioning snippet, the code cannot be observed in action). However, after separating the modal from the navbar and testing the setup, it appears to function as intended with transparency.

To demonstrate functionality, I have included transitions and hover effects for the background colors of both the navbar and the modal.

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="debcb1b1aaadaaacbfae9eebf0eef0ef">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="02616d706742302c3b2c30">[email protected]</a>/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c0a2afafb4b3b4b2a1b080f5eef0eef1">[email protected]</a>/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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to hide the black icons (x) and bars on larger screens and which specific CSS code should I use to achieve this?

I'm attempting to display menu icons only on smaller screens like phones or tablets, and text on larger screens such as laptops or desktops. I've experimented with adjusting the media query and CSS, but haven't had any success. What specific ...

Issues encountered with Angular validation when trying to implement HTML5 validation

I am currently utilizing AngularJS for data binding and attempting to validate data using HTML5 validation features, but encountering issues. Below you can find the code snippet I am using: @using (Html.BeginForm("Ask", "Question", null, FormMethod.Post, ...

How come the image in my email signature is not adhering to the width styling when viewed in Outlook on Windows?

I have designed a unique HTML email signature that includes an embedded image. When viewed in the Komodo previewer and Apple Mail client, it looks like this: https://i.sstatic.net/ZRu1e.png However, upon bringing the same HTML code into Outlook desktop a ...

Concerns with the height of CSS containers

I've encountered an issue where my container doesn't touch the footer in most cases, and I can't figure out what's causing it. Let me share my CSS code: html { min-height: 100%; position: relative; } body { margin: 0; width: ...

Ways to move to the next line following the navigation bar text

Below is the code snippet that I am working with: <nav class="navbar navbar-expand-sm navbar-dark "> <div class="container-fluid"> <a class="navbar-brand" href="#">LOREM IPSUM</a&g ...

Implementing CSS styles with jQuery

Looking for a way to dynamically add CSS attributes to different form elements like text fields, text areas, checkboxes, and dropdowns? There's also a separate block that lists possible CSS properties such as font, font-style, width, and padding. What ...

Arranging three section elements side by side

I have encountered an issue where I have 3 consecutive section tags in a row, but when applying margin to them, the last section tag moves to the next line instead of staying on the same line. I attempted using the float:left and display:inline properties ...

jQuery-powered one-page site - Information in HTML or JavaScript

I am currently learning JavaScript and jQuery, with a strong grasp on HTML/CSS. I am working on developing a single-page front-end website using Bootstrap for layout design. My main focus now is on implementing functionality. Here is the scenario: There a ...

There was an issue in the v-on handler that resulted in an error: "TypeError: The property '$createElement' cannot be read because it is undefined."

I am encountering an issue with some basic input/output code. The task at hand is to receive input in Newick format and use it to create a tree. However, I am struggling to even receive the input correctly. Below is the HTML code snippet I am using: ...

The issue with the VUE b-editable-table data model is that it is reverting back to the

Just starting out with the VUE framework and running into an issue with the b-editable-table model. It seems to be returning the old value instead of the current one. Here is the corresponding bootstrap code snippet: <b-editable-table disableDefaultEdi ...

Encountering Issues with Formatting InnerHtml Text using RegEx

Technology: React.js I have been working on a custom function in JavaScript to highlight specific words within a code block. The function seems to be functioning correctly, but the highlighting isn't staying after the function is completed. Any ideas ...

What is the process for including id parameters within the URL of an HTML page?

As I work on building a website with ReactJS and webpack, I encounter the need to access URL parameters. One specific challenge I face is creating a universal blog post view page that can be dynamically loaded based on the blog id parameter in the URL. Rat ...

Can DOM addEventListener be effectively implemented alongside JQuery events?

In my current project, I am utilizing Bootstrap4 alpha version. As part of my investigations, I am attempting to capture a JQuery event using the DOM's addEventListener() method. The specific event is triggered by Bootstrap through the use of the JQu ...

What methods can I employ with JavaScript to catalog data collected from an HTML form?

Currently, my form requires users to input a username that cannot start or end with a period (.). I have implemented some code but I believe there is an issue with the .value[0] parts. //Checking Username if (document.getElementById("uName&quo ...

Align everyone vertically in the left, center, or right div

My goal is to create a three-column layout with the following specifications: div1 (green) with its content left-aligned div2 (blue) with its content center-aligned div3 (magenta) with content right-aligned Within each column, there are multiple bloc ...

Altering webpage content through the use of Ajax

I need a solution for dynamically updating web page content using JavaScript AJAX. One idea I had was to store different div layouts in separate files, like so: BasicDiv.div: <div> <p>Some Text</p> <button> A Button </ ...

Unstyled Cards Failing to Receive Design

I am currently working on creating a prototype that utilizes two Bootstrap 4 cards to display information from a form and store related information from another form in the second card. The current layout of this setup can be observed below: https://i.sst ...

Hide the div if the content is empty

Within a div created by the_content, there may be content or it could be null, resulting in an empty div that I want to hide. To address this issue, I attempted to store the content in variable $pageContent. However, upon declaring the variable, it either ...

Tool for controlling the layout of the viewport with Javascript

I have experience using ExtJS in the past to create dashboards, and one of my favorite features is the full-screen viewport with a border layout. This allows for easy splitting of a dashboard into panels on different sides without creating excessive scroll ...

Several ways to display images with interactive captions

I am in need of multiple image modals with different descriptions. Each image should have a unique caption that appears when clicked. I have searched for solutions that display alt text for each image, but I require it to show other specific texts upon cli ...