Problem in Delete from table using jquery Function and modal in asp.net mvc

In ASP.NET MVCi am trying to delete a row from table and passed data to view using jquery function but when modal appears i cannot click on submit or cancel button please help my code of Delete Action in controller is here

[HttpPost]
    public ActionResult DeleteProduct(Product prod,string pcode)
    {
        if (Session["Email"] != null)
        {
            bool check_Delete = prod.DeleteProduct(prod, pcode);
            if (check_Delete)
            {
                TempData["Insert"] = "Data Updated Successfully";
                return View("ProductDetails", prod.GetAllProducts());
            }
            else
            {
                TempData["Insert"] = "An error Occured Please Contact System Adminstrator ";
                return View("ProductDetails", prod.GetAllProducts());
            }

        }
        else
        {
            return RedirectToAction("Dashboard", "Login");
        }

    }
}

}

function of jquery here

<script type="text/javascript">
$(function () {
    $('#DeleteProductmodal').on('show.bs.modal', function (e) {
        var button = $(e.relatedTarget) // Button that triggered the modal
        var pname = button.data('status') // Extract info from data-* attributes
        var pcode = button.data('id') // Extract info from data-* attributes
        $(e.currentTarget).find('.modal-title').text('Are You Sure to Delete Product: ' + pname);
        $(e.currentTarget).find("input[name='pcode']").val(pcode);
    });
});

delete link is of product is here

    <td class="align-middle">
     <a href= "" class="text-secondary font-weight-bold text-xs" data-toggle="modal"  datatarget="#DeleteProductmodal" data-status="@item.pname" data-id="@item.pcode">Delete</a>
</td>

and modal is here

@using (Html.BeginForm("DeleteProduct", "Prduct", FormMethod.Post))
                {

                    <div id="DeleteProductmodal" class="modal fade" data-toggle="modal">
                        <div class="modal-dialog">
                            <div class="modal-content">

                                <div class="modal-header bg-gradient-faded-danger">

                                    <h4 class="modal-title bg-gradient-danger"></h4>
                                </div>

                                <div>
                                    <input type="hidden" name="pcode" />
                                </div>

                                <div class="modal-footer">
                                    <input type="button" class="btn btn-default" data-dismiss="modal" value="Cancel">
                                    <input type="submit" class="btn btn-danger" value="Delete Product??"/>
                                </div>

                            </div>
                        </div>
                    </div>
                }

screen shot of output