模式层底部弹出

实现的效果是:模式层从页面底部弹出并且固定在底部。

实现原理

为模式层添加样式

涉及知识点: 样式

Step by Step

1. 模式层元素添加id

2. 将下方代码的“test”改为对应id

#test .modal-dialog {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    margin: 0 auto;
}
#test.modal.fade .modal-dialog {
    -webkit-transition: -webkit-transform .3s ease-out;
    -o-transition: -o-transform .3s ease-out;
    transition: transform .3s ease-out;
    -webkit-transform: translate(0,25%);
    -ms-transform: translate(0,25%);
    -o-transform: translate(0,25%);
    transform: translate(0,25%);
}
#test.modal.in .modal-dialog {
    -webkit-transform: translate(0,0);
    -ms-transform: translate(0,0);
    -o-transform: translate(0,0);
    transform: translate(0,0);
}
#test .modal-content {
  border: 0;
  border-radius: 0;
}

3. 将修改后的代码粘入样式类文件

注意事项

暂无