Bootstrap modal appearing below back-drop (in background) ??Why?


Hello, can anyone help me know, why my bootstrap pop-up modal is appearing on the background and not clickable?

here is my HTML code

<div class="container">
    
    
<div class="Fixdiv">
 
<div class="modal fade">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>  modal pop-up Body part</p>
      </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><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
    
</div>
</div>

CSS

.Fixdiv
{
position:fixed;
top:10px;
left:10px;
}

jquery/javascript

$(document).ready(function()
 { 
    $('.modal').modal("show"); //showing pop-up when page is loaded for example
 }
);

Here is the error image

bootstrap-popup-modal-appearing-below-background-min.png

Any help is appreciated, thanks


Asked by:- bhanu
1
: 12602 At:- 1/10/2018 9:13:13 AM
Bootstrap pop-up modal appearing in background Modal behind backdrop







3 Answers
profileImage Answered by:- vikas_jk

Looking at CSS part your issue, you are giving position:fixed to parent div of modal pop-up because of which you have faced this issue

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

Please, always make sure the modal container and all of its parent elements are positioned the default way to fix the problem.

You should always place your pop-up modal code just before </body> for best practices  or do no enclose it inside posotion:relative or fixed element.
 
Another solution is to set the z-index of the .modal-backdrop to -1.
.modal-backdrop {
  z-index: -1;
}
3
At:- 1/10/2018 3:48:13 PM Updated at:- 1/10/2018 3:49:33 PM
Thanks 0
By : bhanu - at :- 1/12/2018 6:43:58 AM


profileImage Answered by:- pika

This error can also occur when the version of bootstrap js and css files are different so check if versions of both js/css files are same or not.

You can also disable/remove backdrop to get rid of it using HTML property data-backdrop='false' in your modal pop-up HTML, something like this

<div class="modal fade" data-backdrop="false">
    <!--More modal code here-->
</div>
2
At:- 1/12/2018 8:04:49 AM


profileImage Answered by:- user_1921687893

This problem occurs when the modal dialog sits within a container that has any parent that uses either fixed, absolute or relative positioning to fix just place the modal in the <body></body> tag without no parent wrapper or you can do so in Javascript:

$(document).ready(function(){ 
    // Append to body before showing modal.
    $('#myModal').appendTo($('body'));
    $('.modal').modal('show');
});
1
At:- 11/9/2018 2:07:31 PM
thanks 0
By : bhanu - at :- 6/3/2019 5:56:13 PM






Login/Register to answer
Or
Register directly by posting answer/details

Full Name *

Email *




By posting your answer you agree on privacy policy & terms of use