Bootstrap modal not displaying

I've copied and pasted the example code from twitter bootstrap to create a basic modal window in my Rails 3.2 app:

<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">Modal header</h3>
  </div>
  <div class="modal-body">
    <p>One fine body…</p>
  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    <button class="btn btn-primary">Save changes</button>
  </div>
</div>

<a href= "#myModal"  role="button" class="btn" data-toggle="modal">Launch demo modal</a>

It's not working. It's not because of jQuery or scripts not loading because a) it doesn't need to load any js because its using data targeting and b) I've checked the console and everything is firing perfectly.

It's also not because I'm including both boostrap.js and bootstrap-modal.js...I've checked and I'm not.

I'm at a loss. It should just work. Other bootstrap js is working fine on the site.

The only thing I can think of is it's something to do with the definition of the classes .hide and .fade - when I take them out, the modal shows up fine. When I include them, it won't show up at all.

Could jQuery UI be interfering with it?

Please ask me for any further info you might need to help me...

UPDATE:

So I think I see the problem, but I don't know how to fix it. When I check the console, right at the top I see that

element.style {
display: none;
}

is somehow now part of the div, so in the console it looks like this:

<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;" >

But I don't know why it is adding it in, or where from. How can I track this down?

Thanks

I tracked down the reason.

Just to give it some general usefulness to anyone coming to this question. If you can't figure out what's wrong, try doing a 'search all' for any classes of 'modal' 'fade' 'fade in' and 'hide' in any style sheets in your application.

I had a single instance of 'fade' being defined in a random css file, and that's what was stopping it displaying as it was overriding bootstrap. Once I deleted the reference, everything was ok.

If you've upgraded from Bootstrap 2.3.2 to Bootstrap 3 then you'll need to remove the 'hide' class from any of your modal divs.;

I had the same problem. For me the cause was the use of Bootstrap 5 with outdated data-toogle and data-target attributes in the launch button:

After the correction of

<button type="button" class="btn" data-toggle="modal" data-target="#myModal" >

to

<button type="button" class="btn" data-bs-toggle="modal" data-bs-target="#myModal"> 

it ran correctly.

If you're running Bootstrap 4, it may be due to ".fade:not(.show) { opacity: 0 }" in the Bootstrap css and your modal doesn't have class 'show'. And the reason it doesn't have class 'show' may be due to your page not loading jQuery, Popper, and Bootstrap Javascript files.

(The Bootstrap Javascript will add the class 'show' to your dialog automagically.)

Reference: https://getbootstrap.com/docs/4.3/getting-started/introduction/

Change you Code To something like this,

<!-- Modal -->
<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">Modal header</h3>
  </div>
  <div class="modal-body">
    <p>One fine body…</p>
  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    <button class="btn btn-primary">Save changes</button>
  </div>
</div>

<a class="btn" data-target="#myModel" role="button" data-toggle="modal">Launch demo modal</a>

and try using data-target="#ModelId" once. maybe it's the possible causing the issue.

Second, if you have included JQuery more then one time, remove it and include it once only. It also prevents the model sometimes.

Just to elaborate on @jfdimark answer. It was most likely to cause due to same css class name somewhere in loaded CSS. Therefore, instead of defining modal class as "modal fade", change it to "modal fade in" then try again.

As Paula, I had the same problem, my modal was not showing, and I realized that my button was in a '< form >' tag ... :

<button class="btn btn-danger" data-toggle="modal" data-target="#deleteItemModal">Delete</button>

I just replaced < button > by < a >, and my modal worked well

<a class="btn btn-danger" data-toggle="modal" data-target="#deleteItemModal">Delete</a>

Maybe a very rare scenario but I can't add a comment so leaving this here in case it helps someone: I had a similar issue dealing with someone else's code, modal wasn't displaying when I added ".fade" class, issue was some CSS for .modal-backdrop:

.modal-backdrop {display: none;}

After removing that, modal shows up fine.

I had the same issue and I realized that my <button>had a type="submit" when Bootstrap states that it needs to be type="button"

if you are using custom CSS instead of defining modal class as "modal fade" or "modal fade in" change it to only "modal" in HTML page then try again.

I had my modal < div > inside my < li >.... not good.

Outside works fine :-)

<div class="modal fade" id="confirm-logout" tabindex="-1" role="dialog" aria-labelledby="logoutLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">....</h4>
            </div>

            <div class="modal-body">
                <p>....</p>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                <a class="btn btn-danger btn-ok">OK</a>
            </div>
        </div>
    </div>
</div>
<li>
    .....
</li>

If you are using angular and trying to create a directive that has a custom modal in it, the modal backdrop will show but the modal itself will not unless you set replace: true on your directive.

Typescript Directive:

export class myModalDirective implements ng.IDirective {
    static Register = () => {
        angular.module('app').directive('myModal', () => { return new myModalDirective () });
    }
    templateUrl = 'mymodal.html'    
restrict = 'E';
    replace = true;
    scope = {
        show: '='
    }
    link = (scope: any, element: ng.IAugmentedJQuery, attrs: ng.IAttributes, ctrl: any) => {
        var vm = this;
        scope.$watch(function () { return scope.show; }, function (vis) {
            if (vis) {
                $(element).modal('show');
            } else {
                $(element).modal('hide');
            }
        });

    }
    constructor () {
    }
}

Modal HTML

<div class="modal fade" data-keyboard="false" data-backdrop="static">
    <div class="modal-dialog">
        <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Modal Title</h4>
                </div>
                <div class="modal-body">
                </div>
        </div>
    </div>
</div>

I had the same problem.

Solution: I put modal's DIV in the uppermost scope of main HTML (due to using Jinja2 blocks my modal got nested somewhere in the middle of some other DIV.

please

1. collapse all your whit the ># VsCode and verify your

and i been recently copy and paste modals for other bootstrap templates and it is very dangerous because you don´t know if the has closed correctly, or if you is still use the bootstrap templates for other stranger pages originally has errors ONLY on the caused for the designer´s students that upload that to the "free" pages... use Bootstrap free templates at your own risk.

2. verify the order for the modal (modal fade,modal-dialog,modal-content,(modal-header,modal-body,modal-footer)).

3. verify if the method modal show has writhed correctly like this: $('#myModal').modal('show') ....WARNING!!.... note that this example is CASE-SENSITIVE.

4. verify that your modal has writhed correctly like this: div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="ModalVerLabel" aria-hidden="true"....WARNING!!.... note that this example is CASE-SENSITIVE ....and doesn´t has the # indicator.

5 verify that the id modal and the aria-labelledby are unique in my case i am using this technique id="myModal" aria-labelledby="myModalLabel"....WARNING!!.... note that this example is CASE-SENSITIVE ....and doesn´t has the # indicator

Version mismatching can cause this.

I had this issue today, and it was ultimately caused by differing versions of bootstrap.css and bootstrap.js. CSS file was 3.7 and JS was 5.1, once I updated to CSS 5.1 everything fell into place.

After encountering this I was surprised to find that none of these solutions worked, as it seems fairly straight forward and I had similar markup working on a different page.

With my configuration, I had existing jQuery code bound to the same selector triggering the modal. Once starting the process of elimination, all I had to do was comment/remove e.stopPropagation() within my existing script.

In order to get my modal to display when calling .modal('show')

I changed:

modal.on('loaded.bs.modal', function() 

to:

modal.on('shown.bs.modal', function() {

1. Check for all js files, the order should be maintained.
2. The order should be maintained as

    -> jquery.min.js
    -> bootstrap.min.js
    -> any external js files

Sometimes other css conflicts as well - CSS priority issue.

to check, Go to your modal fade class on browser and then check if there is any custom file comes on top. such as .fade:not(.show) where it was using its own information not the bootstrap. if you find then you have to change it to your needs . Hope this helps.

I'm using ui-bootstrap-tpls.js and what worked for me is that I searched in the whole project for fade and found 3 places where this was being set in the mentioned file.

I went through the find results and saw that 2 of the changes were being done on the modal and the other one was being set on the tool tip animation. Note the difference in below code

'uib-modal-animation-class': 'fade'
'tooltip-animation-class="fade"'

What I did to solve the issue was to add the show class for the uib-modal

'uib-modal-animation-class': 'fade show'

It's a good idea to place your modal after the tag, so you are sure no parent element style affects it - in my case modal was hidden because parent div was hidden.

I had this issue before with my code as well and the way I fixed it was actually getting a more updated version of Bootstrap. I previously went from a React app to a full JS/EJS/Node app and I had an older version of bootstrap (it was 4.0). I upgraded to v5.0 as of today and changed the bootstrap css/js links.

Might not be 100% related. BUT since I came across this thread several times during my troubleshooting I thought I could share my results.

When I clicked my "show modal"-button the background got blurred, but no modal was showing. Also before I discovered that in some screen sizes the modal wouldn't show.

The result of my troubleshooting was that a parent to the modal had the following css:

@media (min-width: 768px)
.d-md-none {
    display: none !important;
}

When disabling the display-none the modal showed up :) So what I did to solve it was to move the modal to another place where the css did not do its magics on it.

Make sure you have <div class="modal-dialog"> inside your <div class="modal fade">

Delete the data-target attribute from button type. Then add onClick="$('#your_modal_name').modal('show')" in the button tag. I hope it will work as I faced the same problem & I fixed the issue by calling the show class of modal via jQuery.

I just came across this issue, and found custom CSS style sheet text color:#ffffff is submerging the text content, because model background color is same! i.e. .model-content{ background-color:#ffffff;} Make sure to override it in your custom style sheet by adding the following .modal-content{color:#646464 !important;}
May be this helps.

You are supposed to import jquery and bootstrap.min.js.

Add this to angular-cli:

"scripts": ["../node_modules/jquery/dist/jquery.min.js",
        "../node_modules/bootstrap/dist/js/bootstrap.min.js"]

make sure you have its folders.