我想让 Bootstrap 模态获取完整的窗口高度并像侧边栏一样从右侧打开它?这意味着它应该是右对齐的。
我怎样才能做到这一点?
最佳答案
使用“modal fade”在右侧添加这个 CSS 类“come-from-modal right”
.come-from-modal.left .modal-dialog,
.come-from-modal.right .modal-dialog {
position: fixed;
margin: auto;
width: 320px;
height: 100%;
-webkit-transform: translate3d(0%, 0, 0);
-ms-transform: translate3d(0%, 0, 0);
-o-transform: translate3d(0%, 0, 0);
transform: translate3d(0%, 0, 0);
}
.come-from-modal.left .modal-content,
.come-from-modal.right .modal-content {
height: 100%;
overflow-y: auto;
border-radius: 0px;
}
.come-from-modal.left .modal-body,
.come-from-modal.right .modal-body {
padding: 15px 15px 80px;
}
.come-from-modal.right.fade .modal-dialog {
right: -320px;
-webkit-transition: opacity 0.3s linear, right 0.3s ease-out;
-moz-transition: opacity 0.3s linear, right 0.3s ease-out;
-o-transition: opacity 0.3s linear, right 0.3s ease-out;
transition: opacity 0.3s linear, right 0.3s ease-out;
}
.come-from-modal.right.fade.in .modal-dialog {
right: 0;
}
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<div class="modal fade come-from-modal right" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
关于twitter-bootstrap - 如何从右侧打开 Bootstrap 模式?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43583165/