0

Unable to close bootstrap modal using javascript in Chrome. Same code works in firefox. Here is my modal

<div class="modal hide  fade" id="reportModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="reportTitle"></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 id="reportMsg"></div><br>
        <div id="reportProgress" class="progress">          
          <div class="progress-bar progress-bar-striped" style="min-width: 25px;"></div>          
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" id="createReport" class="btn btn-primary">Create Report</button>
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

And here are all the different things I have tried to close it:

$('#reportModal').modal('hide');
$('#reportModal').modal('toggle');
$('.modal.in').modal('hide')
$(".close").trigger("click");

All of them work in Firefox but none of them in Chrome. There are no errors in the console. Any ideas on how I can get this Modal to close?

Chris
  • 379
  • 1
  • 6
  • 19
  • Do you have the bootstrap js loaded and also jQuery? Documentation is here, have you followed it? https://getbootstrap.com/docs/4.0/components/modal/ I am assuming you are using Bootstrap v4. – Nathaniel Flick Jul 02 '20 at 19:45
  • Bootstrap nd Jquery are loaded. The Modal displays correctly just doesn't close. The close works in Firefox but doesn't in Chrome or IE – Chris Jul 02 '20 at 20:00
  • Hard to diagnose this without seeing the rest of your code and any console errors. – Nathaniel Flick Jul 02 '20 at 20:05
  • What you posted opens and closes fine for me in Chrome. You'll need to edit your question to include a [mcve] so that we can reproduce the issue. Also check the browser's console for errors. – j08691 Jul 02 '20 at 20:29
  • https://stackoverflow.com/questions/10466129/how-to-hide-bootstrap-modal-with-javascript – Nathaniel Flick Jul 02 '20 at 20:31

0 Answers0