Changing the ratchet modal size and slide in position

Question

How can I change the ratchet modal so it slides down from the top and only takes up 50% of the screen rather than the full height?

the css for the modal is;

.modal {
  position: fixed;
  top: 0;
  z-index: 11;
  width: 100%;
  min-height: 100%;
  overflow: hidden;
  background-color: #fff;
  opacity: 0;
  -webkit-transition: -webkit-transform .25s, opacity 1ms .25s;
     -moz-transition:    -moz-transform .25s, opacity 1ms .25s;
          transition:         transform .25s, opacity 1ms .25s;
  -webkit-transform: translate3d(0, 100%, 0);
      -ms-transform: translate3d(0, 100%, 0);
          transform: translate3d(0, 100%, 0);
}
.modal.active {
  height: 100%;
  opacity: 1;
  -webkit-transition: -webkit-transform .25s;
     -moz-transition:    -moz-transform .25s;
          transition:         transform .25s;
  -webkit-transform: translate3d(25%, 0, 0);
      -ms-transform: translate3d(25%, 0, 0);
          transform: translate3d(25%, 0, 0);
}

I've been playing around with different values but can't get it how I want.

score 1 · Accepted Answer · answered Sep 11 '15 at 14:34

1

I'm pretty sure this is close, but cannot really test it at the moment.

transform: translate3d(0,-100%,0); should start the modal at the top of the screen, and transform: translate3d(0,50%,0); should move it to the middle when active. and then the obvious heights changes to 50%...

.modal.active {
    height: 50%;
    opacity: 1;
    -webkit-transition: -webkit-transform .25s;
    -moz-transition: -moz-transform .25s;
    transition: transform .25s;
    -webkit-transform: translate3d(0,50%,0);
    -ms-transform: translate3d(0,50%,0);
    transform: translate3d(0,50%,0);
}

.modal {
    position: fixed;
    top: 0;
    z-index: 11;
    width: 100%;
    min-height: 50%;
    overflow: hidden;
    background-color: #fff;
    opacity: 0;
    -webkit-transition: -webkit-transform .25s,opacity 1ms .25s;
    -moz-transition: -moz-transform .25s,opacity 1ms .25s;
    transition: transform .25s,opacity 1ms .25s;
    -webkit-transform: translate3d(0,-100%,0);
    -ms-transform: translate3d(0,-100%,0);
    transform: translate3d(0,-100%,0);
}

answered Sep 11 '15 at 14:34

Schmalzy

17,044
7
46
47

thanks, that works pretty great, but if I change the class to modal2 it stops working, do I have to change it elsewhere? ( i've also changed the target modal ) – raphael_turtle Sep 11 '15 at 14:51
I found the function to change in ratchet.js – raphael_turtle Sep 11 '15 at 14:54
how can I make it slide in from the right hand side? – raphael_turtle Sep 11 '15 at 15:11
on `.modal` change `transform: translate3d(0,-100%,0);` to `transform: translate3d(100%,0,0);` I think... – Schmalzy Sep 11 '15 at 15:12
Try `transform: translate3d(100%,50%,0);` this is for the `.modal` class only, NOT `.modal.actice`. I tested it and it works as expected. – Schmalzy Sep 11 '15 at 15:30
sorry you were right the first time, I'm trying to make the standard modal slide in from the right which works but it doesn't appear if the width is set to a different value, I want it to be 80% – raphael_turtle Sep 11 '15 at 15:36

Changing the ratchet modal size and slide in position

1 Answers1