Breaking News: Grepper is joining You.com. Read the official announcement!

modal slide from right

Handsome Horse answered on February 3, 2022 Popularity 8/10 Helpfulness 3/10

answer modal slide from right

modal slide from right

Comment

//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);
});

Popularity 8/10 Helpfulness 3/10 Language javascript

Source: Grepper

Tags: javascript slide

Link to this answer
Share Copy Link

Contributed on Feb 03 2022

Handsome Horse

0 Answers Avg Quality 2/10

modal slide from right

Contents

More Related Answers

modal slide from right

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.