“diapositive modale à droite” Réponses codées

diapositive modale à droite

//bootstrap modal
<div id="my_modal" class="modal fade modal-md" role="dialog" data-keyboard="false" data-backdrop="static">
  <div class="modal-dialog" style="margin-right:-39%;">
    <!-- Modal content-->
    <div class="modal-content" style="margin-top:-6%; margin-bottom: -6%;">
      <div class="modal-header">
        <button type="button" class="close">&times;</button>
      </div>
      <div class="modal-body">
            <p>Modal body.....</p>
      </div>
    </div>
  </div>
</div>

jQuery(".modal_open_button").click(function(){
    jQuery("#my_modal").modal('toggle');
    let height = $(window).height();
    jQuery("#my_modal .modal-dialog .modal-content").css('height', height+10+'px');
    setTimeout(function(){
        jQuery("#my_modal .modal-dialog").css({'-webkit-transform':'translateX(-100%)', 'transition': 'transform .5s ease'});
    }, 200);//wait 2 seconds
});

jQuery("#my_modal .modal-dialog .modal-content .modal-header .close").click(function(){
    jQuery("#my_modal .modal-dialog").css({'-webkit-transform':'translateX(-0%)', 'transition': 'transform .5s ease'});
    setTimeout(function(){
        jQuery("#my_modal").modal('hide');
    }, 500);
});