Bootstrap modal appearing under background

Bootstrap modal appearing under background

I have used the code for my modal straight from the Bootstrap example, and have included only the bootstrap.js (and not bootstrap-modal.js). However, my modal is appearing underneath the grey fade (backdrop) and is non editable.

I have used the code for my modal straight from the Bootstrap example, and have included only the bootstrap.js (and not bootstrap-modal.js). However, my modal is appearing underneath the grey fade (backdrop) and is non editable.

Here's what it looks like:


See this fiddle for one way to reproduce this problem. The basic structure of that code is like this:

<body>
    <p>Lorem ipsum dolor sit amet.</p>    

&lt;div class="my-module"&gt;
    This container contains the modal code.
    &lt;div class="modal fade"&gt;
        &lt;div class="modal-dialog"&gt;
            &lt;div class="modal-content"&gt;
                &lt;div class="modal-body"&gt;Modal&lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;

</body> body { padding-top: 50px; }

.my-module { position: fixed; top: 0; left: 0; }

Any ideas why this is or what I can do to fix this?


bootstrap

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Volt - Free Bootstrap 5 Admin Dashboard

Volt is a free and open source Bootstrap 5 Admin Dashboard featuring 11 example pages, 100 components and 3 plugins with Vanilla JS.

Bootstrap Cards Design | Bootstrap 4 Tutorial for Beginners

Bootstrap Cards Design | Bootstrap 4 Tutorial for Beginners Source Code: https://bit.ly/31d8xXp -------------------------------------------------------------...

FREE Icons! How to use Bootstrap Icons v1.0.0 | Bootstrap 5 (2020)

In this video, we'll look at how we can implement these with any of our projects even if we are not using Bootstrap. That's right! You can use these independent of Bootstrap. Bootstrap 5 is not required.

How to put items underneath each other flex box in Bootstrap 4 ?

A Computer Science portal for geeks. It contains well written, well thought and well explained computer science and programming articles, quizzes and practice/competitive programming/company interview Questions.

Calculating Confidence Interval with Bootstrapping

How can we calculate the confidence interval with bootstrapping?