Bootstrap modal appearing under background

Question

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 u

Answer 1

I've simply set:

#myModal {
    z-index: 1500;
}

and it works....

For the original question:

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

Answer 2

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>

Answer 3

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.

Answer 4

Use this in your modal:

data-backdrop="false" 

Answer 5

Change the absolute position to relative.

.modal-backdrop {
    position: relative;
    /* ... */
}

Answer 6

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)