Why modal popup broke html bootstrapping - html

Question

When i push button open popup window, but this window work not correctly. I cant fill all lines and page footer climbs on the window popup
how fix it?
i use only bootstrap and i dont see any z-index
i have PartialView but i think that is view broke
this is view
#{
ViewData[index: "Title"] = "Create";
}
<h3>Create Employee</h3>
<hr/>
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="addEmployeeLabel">Add Employee</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form asp-action="Create">
<input name="IsValid" type="hidden" value="#ViewData.ModelState.IsValid.ToString()"/>
<div class="form-group">
<label asp-for="FistName"></label>
<input asp-for="FistName" class="form-control"/>
<span asp-validation-for="FistName" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="LastName"></label>
<input asp-for="LastName" class="form-control"/>
<span asp-validation-for="LastName" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Position" class="control-label"></label>
#Html.DropDownList("PositionId", (IEnumerable<SelectListItem>) ViewData["PositionId"], "- Select -", new {id = "PositionId"})
<span asp-validation-for="Position" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Salary"></label>
<input asp-for="Salary" class="form-control"/>
<span asp-validation-for="Salary" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="DateStart"></label>
<input asp-for="DateStart" class="form-control"/>
<span asp-validation-for="DateStart" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="DateEnd"></label>
<input asp-for="DateEnd" class="form-control"/>
<span asp-validation-for="DateEnd" class="text-danger"></span>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" data-save="modal" id="save-employee">Save</button>
</div>
</div>
</div>
if need i can uploaded this progect to google disk.

Answer 1

That is because you create a modal in a separate razor view,it would use Layout by default.
Add the following code to your bootstrap modal and no need to add html outside the modal:
#{
Layout = null;
}
#*<h3>Create Employee</h3>
<hr />*#

Answer 2

its simple fix html bootstrapping. i transferred next code before </form>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" data-save="modal" id="save-employee">Save</button>
</div>```