Add some sort of a "callback" to the bootstrap modal open and close event to avoid the transparent grey / gray div staying due to the DOM getting destroyed before it is removed

bootstrap_modal_toggle_callback.html

<!-- Had a bootstrap modal that didn't close fully before the another modal is called -->
<!-- from googling around most people reccomended acting on the hidden events -->
<!-- but I only wanted it to work only when a specific function is called -->
<!-- EVENTS MAY DIFFER FROM VERSION TO VERSION -->
<!-- https://getbootstrap.com/docs/4.0/components/modal/#events -->

<!--
  $("your jquery selector here").one('your choice of events', function(e) {
    // Do something here
  });
-->

<!-- example usage -->

<div id="myModal" class="modal">
  ... modal stuff in here ...
</div>

<script type="text/javascript">
  
  function ModalShowCalbacks(){
    $("#myModal").one('show.bs.modal', function(e){
      // Do something here when .modal('show') is called
      console.log("Hello World");
    }).modal('hide');
    
    $("#myModal").one('shown.bs.modal', function(e){
      // Do something here after .modal('show') is called and finished
      console.log("Hello World");
    }).modal('hidden');
  }
  
  function ModalHideCalbacks(){
    $("#myModal").one('hide.bs.modal', function(e){
      // Do something when .modal('hide') is called
      console.log("Goodnight World");
    }).modal('hide');
    
    $("#myModal").one('hidden.bs.modal', function(e){
      // Do something after .modal('hide') is called and finished
      console.log("Goodnight World");
    }).modal('hidden');
  }
  
</script>