Something weird happed when I'm using Bootstrap Modal

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">&times;</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");
    });

});