I'm adding a button close that will close/hide the Modal diaglog when button is clicked. for some reason nothing is happening when the button is clicked. I assume that the modal id is not recognized after button is clicked. not sure what could be the correct approach?
<--Index.cshtml-->
<div class="form-button-action">
<button type="button" class="btn btn-link btn-lg" id="Edit" onclick="Edit(@item.Id)">
<a class="fas fa-pencil-alt" data-toggle="tooltip" data-placement="top" title="Edit Session"></a></button>
</div>
<div class="modal fade" id="myModalForm" tabindex="-1" role="dialog">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-body" id="myModalBodydiv" data-backdrop="static" data-keyboard="false">
</div>
</div>
</div>
</div>
<script>
var Edit = function (id) {
$.ajax({
type: "GET",
url: "/Exposure/EditSession",
data: { Id: id },
success: function (response) {
$("#myModalBodydiv").html(response);
$('#myModalForm').modal({ backdrop: 'static', keyboard: false })
$("#myModalForm").modal("show");
$("#myModalForm").appendTo("body");
}
})
}
</script>
<--partialView.cshtml-->
@model Insured
<div class="modal-header no-bd">
<h1 class="fw-mediumbold">
Title
</h1>
<button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-footer no-bd">
<button type="submit" class="btn btn-light" id="closeModal" data-dismiss="modal">Close</button>
</div>
<script>
$("#closeModal").click(function () {
$('#myModalBodydiv').modal('hide');
});
</script>