改变棘轮模态尺寸和滑动位置
Changing the ratchet modal size and slide in position
如何更改棘轮模态,使其从顶部向下滑动并且只占据屏幕的 50% 而不是整个高度?
模态的 css 是;
.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);
}
我一直在尝试不同的值,但无法如愿以偿。
我很确定这很接近,但目前无法真正测试它。
transform: translate3d(0,-100%,0);
应在屏幕顶部启动模态框,transform: translate3d(0,50%,0);
应在活动时将其移动到中间。然后明显的高度变为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);
}
如何更改棘轮模态,使其从顶部向下滑动并且只占据屏幕的 50% 而不是整个高度?
模态的 css 是;
.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);
}
我一直在尝试不同的值,但无法如愿以偿。
我很确定这很接近,但目前无法真正测试它。
transform: translate3d(0,-100%,0);
应在屏幕顶部启动模态框,transform: translate3d(0,50%,0);
应在活动时将其移动到中间。然后明显的高度变为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);
}