Hi Team
I have all necessary jquery library for modal form, the issue is when l clicked the icon to load the form its not loading and yet i checked i dont have any conflict js file did debug no error from the console. What could be the reason?
// js logic
<!--Auditor names and address--> <div class="form-group row"> @Html.LabelFor(model => model.Auditor, htmlAttributes: new { @class = "col-md-4 col-form-label text-md-right" }) <div class="col-md-8"> <div class="input-group"> <input type="text" class="form-control" id="auditor"> <div class="input-group-append"> <button class="btn btn-outline-secondary" type="button" id="check-details"> <img src="@Url.Content("~/Images/Person-fill.svg")" alt="Check Names" style="height: 20px; width: 20px;" /> </button> <button class="btn btn-outline-secondary" type="button" id="browse-directory"> <img src="@Url.Content("~/Images/sov-address-book.png")" alt="Check Names" style="height:20px; width:20px;" /> </button> </div> </div> </div> </div> <!--Modal form popup for user checks details--> <div class="modal fade" id="checkDetailsModal" tabindex="-1" role="dialog" aria-labelledby="checkNamesModalLabel" aria-hidden="true"> <div class="modal-dialog modal-xl" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="checkDetailsModalLabel">Check Names</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <div class="container-fluid"> <div class="row"> <div class="col-md-6 border-right"> <!-- Left Border: Search --> <div class="d-flex justify-content-between align-items-center mb-3"> <h5 class="mb-0">Select People and Groups</h5> <div class="input-group"> <input type="text" class="form-control" placeholder="Search"> <div class="input-group-append"> <button class="btn btn-outline-secondary" type="button"> <i class="fas fa-search"></i> </button> </div> </div> </div> <div class="border p-3 mb-3"> <!-- Dropdown List or Other Content Here --> <p>Dropdown List or Other Content Here</p> </div> </div> <div class="col-md-6"> <!-- Right Border: Table --> <div class="d-flex justify-content-between align-items-center mb-3"> <h5 class="mb-0">Details</h5> </div> <div class="border p-3"> <!-- Table with Display Name, E-mail Address, Title, Department, Presence, Work Phone, Location --> <table class="table table-bordered"> <thead> <tr> <th>Display Name</th> <th>E-mail Address</th> <th>Title</th> <th>Department</th> <th>Presence</th> <th>Work Phone</th> <th>Location</th> </tr> </thead> <tbody> <!-- Table Body Content Here --> <tr> <td>John Doe</td> <td>[email protected]</td> <td>Manager</td> <td>IT</td> <td>Available</td> <td>123-456-7890</td> <td>Office</td> </tr> </tbody> </table> </div> </div> </div> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-primary">OK</button> <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button> </div> </div> </div> </div> <script> $(document).ready(function () { $('#check-details').click(function () { $('#checkDetailsModal').modal('show'); }); }); </script>