[twitter-bootstrap] 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

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.

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

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.

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>

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"

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'

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.

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.;

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.

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.

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.

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 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>

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 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.

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.

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() {