44

My aim is to get the page to reload when a Bootstrap modal is closed. The user can close the modal by clicking on the close button or icon or by clicking away from the modal.

My code so far is pretty standard. Taken from: http://getbootstrap.com/javascript/#modals

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch
</button>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">My title</h4>
      </div>
      <div class="modal-body">
        My content
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save</button>
      </div>
    </div>
  </div>
</div>

How can I get the page to reload after a modal is closed?

Update: Wow, fantastic fast response from everybody. Thank you

UiUx
  • 967
  • 2
  • 14
  • 25
henrywright
  • 10,070
  • 23
  • 89
  • 150

3 Answers3

101

You can bind the event to reload page on click of close:

$('#myModal').on('hidden.bs.modal', function () {
 location.reload();
})

Demo

Milind Anantwar
  • 81,290
  • 25
  • 94
  • 125
  • 2
    Add it to the document if the modal is dynamically added. `$(document).on('hidden.bs.modal', '#Control_id', function (event) { // code to run on closing });` source: https://stackoverflow.com/a/22058588/2495584 – Gellie Ann Jun 22 '21 at 06:42
  • can this be done on a class instead of an id? Doesn't work when I use a class instead of an id – MGLondon May 09 '22 at 15:07
16

try this with your button:

onclick="javascript:window.location.reload()"

full button:

<button type="button" onclick="javascript:window.location.reload()" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>

example: http://jsfiddle.net/Valtos/52VtD/2288/embedded/result/

Manuel Richarz
  • 1,916
  • 13
  • 27
  • 1
    Thanks for your suggestion - I think I'm going to use Milind's solution 'hidden.bs.modal' as it is an event provided by Bootstrap – henrywright Feb 05 '14 at 13:25
  • 2
    It's also so I can keep my script separate - instead of having another attribute on the button. – henrywright Feb 05 '14 at 13:30
  • This just doesn't work as expected, try http://stackoverflow.com/a/21578351/3063226 it worked perfectly for me. – Heitor Mar 21 '17 at 04:36
  • onclick="javascript:window.location.reload()" worked for me if added to the close action button/s in the modal, rather than the modal open button in the host page. – MTAdmin Dec 21 '22 at 18:33
7
$('#myModal').on('hidden', function () {
  document.location.reload();
})

Demo

124
  • 2,757
  • 26
  • 37