实现的效果是:模式层从页面底部弹出并且固定在底部。
为模式层添加样式
涉及知识点: 样式
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. 将修改后的代码粘入样式类文件
暂无