Something weird happed when I'm using Bootstrap Modal - asp.net-core

Question

Sorry about the title but in fact I don't know how is question form in my case, So I'm working on project With ASP MVC Core 3.1 I want to show Modal when User Press button, So I took the code copy past from bootstrap website and it showing with me like the picture and here is my code into view
<button type="button" class="btn btn-primary" data-toggle="modal" data-
target="#staticBackdrop">
</button>
<div class="modal fade" id="staticBackdrop" data-backdrop="static" tabindex="-1" role="dialog"
ria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="staticBackdropLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Understood</button>
</div>
</div>
</div>
</div>
and here is my action
public IActionResult Statistics()
{
return View();
}
it sample but I don't know why it showing like this any one can help.

Answer 1

Ok guys here is the problem is my modal be into a view so it happened position problem when I appended into body it works fine. and here is the js code
$(function () {
$('#Btn1').click(function (event) {
$("#staticBackdrop").modal("show");
$("#staticBackdrop").appendTo("body");
});
});

Answer 2

Hu,
probably is CSS issues.
try to write this css code
.modal-backdrop {
/* bug fix - no overlay */
display: none;
}
for more info, read this article
https://weblog.west-wind.com/posts/2016/sep/14/bootstrap-modal-dialog-showing-under-modal-background