724

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:

modal hiding behind backdrop

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>    

    <div class="my-module">
        This container contains the modal code.
        <div class="modal fade">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-body">Modal</div>
                </div>
            </div>
        </div>
    </div>
</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?

7
  • In case someone else searches for some time for open tags, etc. trying to figure out why this is happening, for me it was the Feedly chrome extension that broke my modals. Disabling the extension returned behavior to normal.
    – trey-jones
    Commented Sep 10, 2014 at 15:20
  • In may case the problem was on iOS and caused by overflow-x: hidden applied to the container of the modal.
    – idmean
    Commented Jul 17, 2015 at 9:14
  • 1
    Created 3 examples across 3 versions. 3.3.1 works fine and the others don't. Version 3.3.1 jsfiddle Version 3.3.5 jsfiddle Version 3.3.6 jsfoddle
    – Dimitry
    Commented Aug 1, 2016 at 20:00
  • 1
    Created a bug report with Bootstrap team seems like this is not really a bug even thought it worked fine in 3.3.1. You can read more about it in the link I posted.
    – Dimitry
    Commented Aug 2, 2016 at 0:07
  • 2
    A blog post of relevance to anybody facing this issue weblog.west-wind.com/posts/2016/Sep/14/…
    – user1228
    Commented Sep 14, 2016 at 18:54

68 Answers 68

787

If the modal container has a fixed or relative position or is within an element with fixed or relative position this behavior will occur.

Make sure the modal container and all of its parent elements are positioned the default way to fix the problem.

Here are a couple ways to do this:

  1. Easiest way is to just move the modal div so it is outside any elements with special positioning. One good place might be just before the closing body tag </body>.
  2. Alternatively, you can remove position: CSS properties from the modal and its ancestors until the problem goes away. This might change how the page looks and functions, however.
19
  • 32
    Good catch. FYI, not just "fixed", the parent's postion "relative" causes this problem as well
    – JNN
    Commented Oct 8, 2012 at 4:34
  • 5
    @Muhd how do you make sure it and all of its parent elements are positioned the default way?
    – indago
    Commented Mar 8, 2013 at 12:05
  • 6
    Prefer use the option one : " just move the modal div so it is outside any elements with special positioning". Thx
    – mpgn
    Commented May 28, 2013 at 13:19
  • 11
    I don't understand this answer. The Bootstrap examples show a modal div with a number of classes along the line of "modal","modal-fade", etc. Inside .modal it sets position:fixed, and inside "modal-body" it sets position:relative. So how is moving the modal container going to change anything, when .modal sets position:fixed?
    – Carlos
    Commented Sep 29, 2014 at 17:54
  • 6
    i got this problem still. I add it right before </body> and body doens't have any position style attrib. Any other idea? Commented Feb 24, 2015 at 7:18
486

The problem has to do with the positioning of the parent containers. You can easily "move" your modal out from these containers before displaying it. Here's how to do it if you were showing your modal using js:

$('#myModal').appendTo("body").modal('show');

Or, if you launch modal using buttons, drop the .modal('show'); and just do:

$('#myModal').appendTo("body") 

This will keep all normal functionality, allowing you to show the modal using a button.

7
  • 22
    Use that generic event handler to make @leandrotk solution work for all modals you can have in a page $('.modal-dialog').parent().on('show.bs.modal', function(e){ $(e.relatedTarget.attributes['data-target'].value).appendTo('body'); })
    – Patrick M.
    Commented May 29, 2016 at 22:16
  • 8
    This works great when you really can't fix the CSS positioning. Thanks :) Commented Sep 12, 2016 at 15:10
  • 1
    From leandrotk answer, just change #myModal to .modal to look like this: $('.modal').appendTo("body"). This will work with all the modals since they have a default class modal. Commented Apr 1, 2017 at 11:56
  • 1
    Still relevant for bootstrap5, thanks!
    – Solvalou
    Commented Nov 20, 2021 at 11:01
  • 1
    great solution! I used plain js: document.body.appendChild(document.getElementById('myModal')); Commented Feb 1, 2022 at 10:59
197

I tried all options supplied above but didn't get it to work using those.

What did work: setting the z-index of the .modal-backdrop to -1.

.modal-backdrop {
  z-index: -1;
}
14
  • 16
    This worked perfectly and is by far the easiest solution. I used z-index: 0; Commented Nov 17, 2014 at 13:39
  • Can also confirm that only this options works! Thanks! Commented Feb 4, 2015 at 22:55
  • Thanks! Is this a bug on BS3?
    – mauriblint
    Commented Mar 18, 2015 at 13:31
  • 3
    This doesn't work if you're using a theme that has many varying z-indices. For example, setting the backdrop to -1 would cause it to appear behind other elements on the page such as panels. But setting it to 3 made it above everything except the modal popup. Commented Sep 2, 2015 at 20:15
  • 1
    I found this to be the fastest method as well after exhausting the suggestions in the answers rated higher above. In my case setting the div with the modal-dialog class to a z-index of 1060 popped it in front of the overlay. If you use the navbar you will want to move the modal above the overlay and not the other way around, otherwise your navbar may pop on top of the overlay... chaos insues... Commented Nov 10, 2015 at 1:11
152

Also, make sure that version of BootStrap css and js are the same ones. Different versions can also make modal appearing under background:

For example:

Bad:

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>

Good:

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
5
  • Just had the same problem, same version stylesheet solution seems to have helped everyone! Thanks
    – HGB
    Commented Oct 4, 2015 at 23:54
  • Malcor no problems, i've spent a lot of time while i figured this bug out. As we see that was in '14, now is '16, bug still exist. Actually this is not a bug, but in bootstrap authors should add this into their documentation or something..
    – Sid
    Commented Feb 18, 2016 at 10:33
  • Same deal here, we changed over to generating our SASS and completely forgot about the js file itself.. This needs to be the top answer.. As our modal is always by default included just before the body close tag...
    – Angry 84
    Commented Sep 15, 2016 at 0:40
  • Thanks! I upgraded from 3.3.5 to 3.3.7 and it worked. Commented Nov 19, 2016 at 15:45
  • Same was the issue with me, different versions Commented Dec 30, 2016 at 18:19
129

I have also encountered this problem and none of the solutions worked for me until i figured out i actually don't need a backdrop. You can easily remove the backdrop with the folowing code.

<div class="modal fade" id="createModal" data-backdrop="false">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4>Create Project</h4>
            </div>
            <div class="modal-body">Not yet made</div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

Note: the data-backdrop attribute needs to be set to false (other options: static or true).

7
  • Brilliant! I also needed to require bootstrap - not sure why all of my other Bootstrap functionality works fine but I needed require to make modal work. Commented Apr 24, 2015 at 13:09
  • Perfect !!! struggled for a day ..and u saved my another day. Thanks again.. +1 and cheers
    – Bhaskara
    Commented Apr 28, 2015 at 13:39
  • 1
    After carefully reading all solutions, I found this to be the most sensible one as of todays version of bootstrap and jQuery. Thank you.
    – Encryption
    Commented Jun 3, 2015 at 14:05
  • 3
    Thank you! This question has over 140k in views and I don't understand why bootstrap can't fix this. oh well, cheers.
    – Chad
    Commented Sep 5, 2016 at 23:28
  • A Good solution! Altough backdrop is good for user experience
    – Zaid Mirza
    Commented Oct 25, 2016 at 10:52
68

I got it to work by giving a high z-index value to the modal window AFTER opening it. E.g.:

$("#myModal").modal("show");
$("#myModal").css("z-index", "1500");
9
  • 1
    Is it working (the man says it is), why you down vote? As I am looking it seems that it will.
    – Rolice
    Commented Mar 15, 2013 at 11:52
  • Yeah, can anyone please explain why this is a bad answer? Is it just that it's kind of hacky?
    – brandones
    Commented Apr 18, 2013 at 17:16
  • 7
    I don't understand the down votes. Yes, it's hacky but the other solutions didn't work for me so thought I'd contribute this to the people who don't mind using "hacky" solutions to just get the damn thing to work. Commented Apr 28, 2013 at 4:30
  • 4
    It is a bad answer because it is a hack and doesn't make any attempt to indicate this. Other answers say, "if nothing else works you could...". The reality is that the modal is very widely used across the web and should work if implemented correctly. Hacky answers don't help people to work out how to do things the correct way.
    – Lukos
    Commented Nov 26, 2014 at 12:42
  • 1
    @AndrewDyster I was faced with the same problem (today) as the OP and I've looked at a lot of answers which helped to a certain point, but yours was the clincher. However, since I had 2 fixed elements inside 2 included files, I had to use a higher z-index than what you posted, but nonetheless it worked, cheers. Commented May 29, 2017 at 18:58
46

Solution provided by @Muhd is the best way to do it. But if you are stuck in a situation where changing structure of the page is not an option, use this trick:

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" data-backdrop="false" style="background-color: rgba(0, 0, 0, 0.5);">
<div class="modal-dialog" role="document">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal"
                aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
            <h4 class="modal-title" id="myModalLabel">Modal title</h4>
        </div>
        <div class="modal-body">...</div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
        </div>
    </div>
</div>

The trick in here is data-backdrop="false" style="background-color: rgba(0, 0, 0, 0.5);" by removing the default backdrop and create a dummy one by setting background color of the dialog itself with some alpha.

Update 1: As pointed out by @Gustyn that clicking on the background does not close the dialog as is expected. So to achieve that you have to add some java script code. Here is some example how you can achieve this.

$('.modal').click(function(event){
    $(event.target).modal('hide');
});
5
  • This works except that clicking on the background does not close the dialog as is expected.
    – Gustyn
    Commented May 14, 2017 at 23:36
  • Krishnendu u are my hero. I came to work with doom and gloom in mind. 3 days before my final presentation to be facing this issue all of a sudden was nerve wrecking to say the least. U my friend deserve 100000 upvotes alas can only give u one :) have a wonderfuly blessed day. Commented Jun 7, 2017 at 15:57
  • When I try this, it doesn't cover the full background of the page - just the div element that the modal is declared in.
    – Will Sam
    Commented Jun 29, 2017 at 21:32
  • This is the best solution IMO. Don't get why Bootstrap didn't implement it this way to begin with.
    – Yarin
    Commented Oct 9, 2018 at 18:35
  • This worked perfectly for bootstrap 5 as well.
    – Shrikant
    Commented Sep 9, 2023 at 10:56
34

The easiest solution I found, that worked for all my cases, was an answer in a similar post:

Here it is:

.modal {
  background: rgba(0, 0, 0, 0.5); 
}
.modal-backdrop {
  display: none;
}

Basically, the original backdrop is not used. Instead you use the modal as the backdrop. The result is that it looks and behaves exactly as the original should've. It avoids all the issues with z-indexes (for me changing z-index to 0 solved the issue, but created a new problem with my nav menu being between the modal and backdrop) and is simple.

Credit goes to @Jevin O. Sewaruth for posting the original answer.

3
  • This should really be an accepted answer!
    – AnrDaemon
    Commented Jan 25, 2022 at 12:05
  • A good solution but I think it has an alternative. data-backdrop="false" Commented Jun 21, 2022 at 7:23
  • Problem with this is the backdrop no longer serves the purpose of disabling anything behind the modal from being clicked, which is many times desired. Commented Oct 31, 2022 at 15:26
22

This would cover all modals without messing up any of the animations or expected behavior..

$(document).on('show.bs.modal', '.modal', function () {
  $(this).appendTo('body');
});
6
  • 2
    global solution. however it's better to find the problem. Commented Aug 30, 2017 at 13:49
  • 1
    Can you explain how it would get messy? All it's doing is moving the modal from where it currently is in the DOM to the end of the body tag. It's not creating anything that's not already there, just moving it and automatically giving it the top z-index.
    – Cam Tullos
    Commented Sep 12, 2017 at 17:34
  • 3
    Best Solution i think. no need to edit any css and change modal appearance
    – Moslem7026
    Commented Jan 18, 2019 at 18:14
  • 1
    This worked perfectly for me as I was not able to change my models because of the limitation of ng-repeat. It works for anyone that cannot change the structure of the page due to specific reasons (such as mine)
    – Mahmoud H
    Commented Aug 31, 2020 at 1:35
  • 1
    #1 underrated answer Commented May 28, 2022 at 3:44
16

A but late on this but here is a generic solution -

    var checkeventcount = 1,prevTarget;
    $('.modal').on('show.bs.modal', function (e) {
        if(typeof prevTarget == 'undefined' || (checkeventcount==1 && e.target!=prevTarget))
        {  
          prevTarget = e.target;
          checkeventcount++;
          e.preventDefault();
          $(e.target).appendTo('body').modal('show');
        }
        else if(e.target==prevTarget && checkeventcount==2)
        {
          checkeventcount--;
        }
     });

Visit this link - Bootstrap 3 - modal disappearing below backdrop when using a fixed sidebar for details.

1
  • This was a perfect solution for a Wordpress plugin I was creating where I couldn't control the parent elements on other people's themes. Commented Oct 27, 2014 at 20:17
11

An other way to approach this is to remove the z-index from the .modal-backdrop in bootstrap.css. This will cause the backdrop to be on the same level as the rest of your body (it will still fade) and your modal to be on top.

.modal-backdrop looks like this

.modal-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #000000;
}
11

Just add two lines of CSS:

.modal-backdrop{z-index: 1050;}
.modal{z-index: 1060;}

The .modal-backdrop should have 1050 value to set it over the navbar.

1
  • Nice, but if the container of the modals has position: fixed this will not work.
    – CPHPython
    Commented May 24, 2018 at 10:57
9

I've simply set:

#myModal {
    z-index: 1500;
}

and it works....

For the original question:

.my-module {
    z-index: 1500;
}
1
  • My issue was the z-index too.
    – James
    Commented Jul 20, 2015 at 13:14
9

I resolved my issue by adding data-backdrop="false" to the div:

<div class="modal fade" id="exampleModalCenter" data-backdrop="false" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">

.....
9

The easiest solution is to move the modal dialog outside of any container and just declare it under the <body> element:

<body>    
    <div>
        ...
    <div>
    
    
    <div class="modal">
        ... modal dialog here
    </div>
</body>

I've tried this solution and it works for me.

Source: https://weblog.west-wind.com/posts/2016/sep/14/bootstrap-modal-dialog-showing-under-modal-background

0
8

Use this in your modal:

data-backdrop="false" 
8

This problem can often be experienced when using things like gradients in CSS for things like backgrounds or even accordion headers.

Unfortunately, modifying or overriding core Bootstrap CSS is undesirable, and can lead to unwanted side effects. The least intrusive approach is to add data-backdrop="false" but you may notice that the fade effect no longer works as expected.

After following recent releases of Bootstrap, version 3.3.5 seems to resolve this issue with no unwanted side effects.

Download: https://github.com/twbs/bootstrap/releases/download/v3.3.5/bootstrap-3.3.5-dist.zip

Be sure to include the CSS files and JavaScript files from 3.3.5.

8

I have a lighter and better solution..

It could be easily solve through some additional CSS styles..

  1. hide the class .modal-backdrop (auto generated from Bootstrap.js)

    .modal-backdrop
    {
    display:none;
    visibility:hidden; 
    position:relative
    }
    
  2. set the background of .modal to a translucent black backdrop image.

    .modal
    {
    background:url("http://bin.smwcentral.net/u/11361/BlackTransparentBackground.png")
    // translucent image from google images 
    z-index:1100; 
    }
    

This will works best if you have a requirement that needs the modal to be inside an element and not near the </body> tag..

1
7

Hi I had the same issue then I realize that when you using bootsrap 3.1 Unlike in older versions of bootsrap (2.3.2) the html structure of the modal was changed!

you must wrap your modal header body and footer with modal-dialog and modal-content

<div class="modal hide fade">

  <div class="modal-dialog">
    <div class="modal-content">

    **here goes the modal header body and footer**

    </div>
  </div>

 </div>
3
  • +1 make sure you are using compatible versions of bootstrap.css and bootstrap.js and that your markup matches the version you are using.
    – srayner
    Commented Nov 11, 2014 at 22:35
  • Yes this is what was my conclusion and I wrote it here just if anyone had this issue.
    – talsibony
    Commented Nov 13, 2014 at 6:47
  • Jesus Christ, this answer is buried deep. Same case for Bootstrap 4.
    – Randell
    Commented Aug 2, 2018 at 4:26
6

none of the suggested solutions above worked for me but this technique solved the issue:

$('#myModal').on('shown.bs.modal', function() {
   //To relate the z-index make sure backdrop and modal are siblings
   $(this).before($('.modal-backdrop'));
   //Now set z-index of modal greater than backdrop
   $(this).css("z-index", parseInt($('.modal-backdrop').css('z-index')) + 1);
}); 
1
  • I prefer this way because I lost CSS formatting with the other methods. Commented Feb 23, 2017 at 8:59
6

I had this issue and the easiest way to fix it was addind z-index greater than 1040 on the modal-dialog div:

<div class="modal-dialog" style="z-index: 1100;">

I believe bootstrap create a div modal-backdrop fade in which in my case has the z-index 1040, so if You put the modal-dialog on top of this, it should not be grey out anymore.

5

in your navbar navbar-fixed-top need z-index = 1041 and also if u use bootstarp-combined.min.css the also change .navbar-fixed-top, .navbar-fixed-bottom z-index to 1041

5

set the z-index .modal to a highest value

For example, .sidebarwrapper has z-index of 1100, so set the z-index of .modal to 1101

.modal {
    z-index: 1101;
}
5

In my case solve it, add this in my stylesheet:

.modal-backdrop{
  z-index:0;
}

with google debugger, can examine element BACKDROP And modify attributes. Goog luck.

4
$('.modal').insertAfter($('body'));
0
4

This worked for me:

sass: 
  .modal-backdrop
    display: none
  #yourModal.modal.fade.in
    background: rgba(0, 0, 0, 0.5)
3

You can also remove the z-index from .modal-backdrop. Resulting css would look like this.

.modal-backdrop {
}
  .modal-backdrop.in {
    opacity: .35;
    filter: alpha(opacity=35); }
3

I removed modal backdrop.

.modal-backdrop {
    display:none;
}

This is not better solution, but works for me.

3

what i find is that:

in bootstrap 3.3.0 it's not right,but when in bootstrap 3.3.5 it's right.let's see the code. 3.3.0:

this.$backdrop = $('<div class="modal-backdrop ' + animate + '" />')
    .prependTo(this.$element)

3.3.5

  this.$backdrop = $(document.createElement('div'))
        .addClass('modal-backdrop ' + animate)
        .appendTo(this.$body)
3

Add this one to you pages. It work for me.

<script type="text/javascript">
    $('.modal').parent().on('show.bs.modal', function (e) { $(e.relatedTarget.attributes['data-target'].value).appendTo('body'); })
</script>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.