Bootstrap modal not displaying

Question

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

Answer 1

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>

Answer 2

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>

Answer 3

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.

Answer 4

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.

Answer 5

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"

Answer 6

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.

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