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">×</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
Any help is appreciated, thanks
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..modal-backdrop {
z-index: -1;
}
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>
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');
});Subscribe to our weekly Newsletter & Keep getting latest article/questions in your inbox weekly
Buy us a coffee
Become a Patron