'Bootstrap modal appearing under background

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?

Solution 1:^[1]

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.

Solution 2:^[2]

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

Solution 3:^[3]

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>

Solution 4:^[4]

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

Solution 5:^[5]

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");

Solution 6:^[6]

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');
});

Solution 7:^[7]

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');
});

Solution 8:^[8]

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.

Solution 9:^[9]

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.

Solution 10:^[10]

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

Solution 11:^[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.

Solution 12:^[12]

I've simply set:

#myModal {
    z-index: 1500;
}

and it works....

For the original question:

.my-module {
    z-index: 1500;
}

Solution 13:^[13]

Use this in your modal:

data-backdrop="false"

Solution 14:^[14]

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.

Solution 15:^[15]

I have a lighter and better solution..

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

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

.modal-backdrop
{
display:none;
visibility:hidden; 
position:relative
}

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

Solution 16:^[16]

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>

Solution 17:^[17]

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);
});

Solution 18:^[18]

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.

Solution 19:^[19]

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

.....

Solution 20:^[20]

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

Solution 21:^[21]

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.

Solution 22:^[22]

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

Solution 23:^[23]

This worked for me:

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

Solution 24:^[24]

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

Solution 25:^[25]

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); }

Solution 26:^[26]

I removed modal backdrop.

.modal-backdrop {
    display:none;
}

This is not better solution, but works for me.

Solution 27:^[27]

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)

Solution 28:^[28]

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>

Solution 29:^[29]

I was fixed this by adding style below to DIV tag

style="background-color: rgba(0, 0, 0, 0.5);"

And add custom css

.modal-backdrop {position: relative;}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	imtk
Solution 2	Jan van der Burgt
Solution 3	madi
Solution 4	CPHPython
Solution 5	Andrew Dyster
Solution 6
Solution 7	Cam Tullos
Solution 8	anon123
Solution 9	Community
Solution 10	Samuel Bergeron
Solution 11	Wahyu Primadi
Solution 12	AmintaCode
Solution 13	Sliq
Solution 14	Richard Nalezynski
Solution 15	DanielBarbarian
Solution 16
Solution 17	Javed Iqbal
Solution 18	Chris Rosete
Solution 19	the Tin Man
Solution 20	A Mohudum Kamil
Solution 21	Ckevyn Ovalle
Solution 22	Mohsin
Solution 23	Dapeng114
Solution 24	quent
Solution 25	Matthew Gallegos
Solution 26	durron597
Solution 27	Suresh Karia
Solution 28	H. Pauwelyn
Solution 29	RaymondLe

'Bootstrap modal appearing under background

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]

Solution 6:[6]

Solution 7:[7]

Solution 8:[8]

Solution 9:[9]

Solution 10:[10]

Solution 11:[11]

Solution 12:[12]

Solution 13:[13]

Solution 14:[14]

Solution 15:[15]

Solution 16:[16]

Solution 17:[17]

Solution 18:[18]

Solution 19:[19]

Solution 20:[20]

Solution 21:[21]

Solution 22:[22]

Solution 23:[23]

Solution 24:[24]

Solution 25:[25]

Solution 26:[26]

Solution 27:[27]

Solution 28:[28]

Solution 29:[29]