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?


Angular 9 Tutorial: Learn to Build a CRUD Angular App Quickly

What's new in Bootstrap 5 and when Bootstrap 5 release date?

Brave, Chrome, Firefox, Opera or Edge: Which is Better and Faster?

How to Build Progressive Web Apps (PWA) using Angular 9

What is new features in Javascript ES2020 ECMAScript 2020

Angular Bootstrap Tutorial - Building Websites with Angular Bootstrap

In this Angular Bootstrap tutoria will help you learn to create beautiful websites easily using Bootstrap along with Angular. You'll learn: What is Angular? What is Bootstrap? Creating an Angular Application; Embedding Bootstrap with Angular

What's new in Bootstrap 5 and when Bootstrap 5 release date?

Bootstrap is one of the open source that many developers love. So what do we expect of the new changes when Bootstrap 5 is released?

Installing Bootstrap in Angular Project with 2 simple steps

Learn Efficient Ways To Install Bootstrap In Your Angular Project