How to reset the bootstrap modal when it gets closed and open it fresh again?

by

Just reset any content manually when modal is hidden:

$(".modal").on("hidden.bs.modal", function(){
    $(".modal-body1").html("");
});

There is more events. More about them here

$(document).ready(function() {
  $(".modal").on("hidden.bs.modal", function() {
    $(".modal-body1").html("Where did he go?!?!?!");
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>

<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch modal
</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"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
        </button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        <div class="modal-body1">
          <h3>Close and open, I will be gone!</h3>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

More Related Contents:

  1. Changing nav-bar color after scrolling?
  2. Getting Bootstrap’s modal content from another page
  3. How to create a responsive image that also scales up in Bootstrap 3
  4. How to change active class while click to another link in bootstrap use jquery?
  5. How to enable Bootstrap tooltip on disabled button?
  6. How to open specific tab of bootstrap nav tabs on click of a particuler link using jQuery?
  7. How to keep the changes made to DOM by javascript/jquery on page refresh
  8. Onclick reload the div only
  9. Bootstrap Dropdown with Hover
  10. How to resize Twitter Bootstrap modal dynamically based on the content
  11. The data-toggle attributes in Twitter Bootstrap
  12. script order for jquery with bootstrap
  13. Bootstrap Dropdown menu is not working
  14. When we using alert vs popup div tag? [closed]
  15. How to change the href attribute for a hyperlink using jQuery
  16. jQuery Get Selected Option From Dropdown
  17. How to take screenshot of a div with JavaScript?
  18. How to close an open collapsed navbar when clicking outside of the navbar element in Bootstrap 3?
  19. Dropdown select with images
  20. How to find a parent with a known class in jQuery?
  21. Generic way to detect if html form is edited
  22. Is there a way to create out of DOM elements in Web Worker?
  23. Calling a function on Bootstrap modal open
  24. how to move a div with arrow keys
  25. jQuery Change event on an element – any way to retain previous value?
  26. Emailing to multiple recipients with html Mailto: not working
  27. How to show hidden divs on mouseover?
  28. Using .after() to add html closing and open tags
  29. Fire oninput event with jQuery
  30. canvas- Cropping images in different shapes

Leave a Comment