Bootstrap 4

by hxtpoe

HTML

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.4/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/flatly/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css">
<!-- Button triggers exampleModal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
 example modal
</button>

<!-- Button triggers anotherModal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#anotherModal">
  another modal
</button>

<!-- Button triggers anotherModal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalWithText">
  modal with text
</button>

<!-- exampleModal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">example modal</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <iframe width="560" height="315" src="https://www.youtube.com/embed/QjqjziSkefU?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

<!-- anotherModal -->
<div class="modal fade" id="anotherModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div...

CSS

body {
  margin: 10px;
}

JavaScript

$('.modal').on('hide.bs.modal', function() {
  var memory = $(this).html();
  $(this).html(memory);
});