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

Curcuma

Answer 1

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.

Curcuma

.in { display:block } for bootstrap 3.0 seems to be another potential class to explore. – Anticlerical

i had the same problem when i had angular-animate included, removing it did the trick – Uel

have my babies! – Forde

have my all upvtotes – Illuminism

For me, it was as stupid as a google search for "bootstrap modal" links to old documentation. Make sure to select your current version! – Shopping

Answer 2

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.

Jefferson

Get all my babies plus one. Here is it. – Isodiametric

Totally agree that most samples are outdated or not compatible with the used Bootstrap version. Thanks to @Schneider noticed mine with the replacement of data-target with data-bs-target.Thanks to @Isodiametric as well, just follow the sample from the actual documentation and it shall be fine. – Selectman

Also remember to change data-dismiss to data-bs-dismiss – Muster

Thanks. I was finding what am I missing than found this. It worked. – Sixtyfour

Answer 3

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

Goltz

This seems to be not the case now, so fade now is used in current version. – Isodiametric

Answer 4

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/

Yama

Yes, this right answer for Bootstrap 4 css is loaded without Bootstrap Javascript file. – Abb

Answer 5

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.

Woolson

Answer 6

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>

Breathing

Thanks , I forgot to add the data-toggle and data-target – Fanatic

Answer 7

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.

Ehling

This should be posted as a comment on the answer in question. If you cannot comment because of your low reputation, you can wait until you have enough to do so. – Spastic

Answer 8

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.

Grimsby

Answer 9

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"

Amygdaloid

Answer 10

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.

Ridicule

Answer 11

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.

Bridgework

Answer 12

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>

Square

Damn, how specific problem, and that same happened to me as well! – Paraguay

Answer 13

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>

Croton

Answer 14

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.

Alleras

Answer 15

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

Jeanettajeanette

Answer 16

**added the same css for .show what is there for .in. I am using Bootstrap 4.6.0 and jquery 2.1.1 now my popup modal dialog is opening after below solution **

        1).fade.in {
        opacity: 1; }
       
 .fade.show {
            opacity: 1;
        }
    
        2).modal.in .modal-dialog {
        transform: translate(0, 0); }
       
 .modal.show .modal-dialog {
            transform: translate(0, 0);
        }
        3) .modal-backdrop.in {
        opacity: 0.5; }
       
 .modal-backdrop.show {
            opacity: 0.5;
        }
    
    
       

Countryfied

Answer 17

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.

Callahan

Answer 18

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

Stela

Answer 19

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

Base

Answer 20

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.

Gronseth

Answer 21

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'

Ferdie

Answer 22

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.

Mitran

Answer 23

please

1. collapse all your whit the ># VsCode and verify your are well closed now, verify other and other again you can use the whit the propose to have a transability for the 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

Hawsepipe

Answer 24

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.

Flivver

Answer 25

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.

Maddi

Answer 26

In case it could help anyone adding JS bootstrap bundle fixed my problem!

Rossini

Hey @Leith, welcome to the site! It sounds like your answer is reasonable but please could provide some additional context, like a link to appropriate documentation or the package on NPM? – Lilian

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Lilian

Answer 27

The .fade class made my modal not show, only dark background (Bootstrap 4.3.1)

Sarina

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Good

Answer 28

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.

Suanne

Answer 29

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.

Spiegleman

Answer 30

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.

Parget