bootstrap 3 Modal Dialog 上下左右居中

来源：互联网发布：淘宝小二介入退款流程编辑：程序博客网时间：2024/06/06 10:12

html code:

div id="confirm-dialog" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

div class="modal_wrapper" >

div class="modal-dialog">

div class="modal-content">

div class="modal-header">

button type="button" class="close" data-dismiss="modal" aria-hidden="true">× /button>

h4 class="modal-title">Confirm /h4>

/div>

div class="modal-body">

/div>

div class="modal-footer">

button type="button" class="btn btn-default" data-dismiss="modal" id="confirm-dialog-button-left">Close /button>

button type="button" class="btn btn-primary" id="confirm-dialog-button-right">Cancel /button>

/div>

css:

.modal{

width: 100%;

position: fixed;

text-align: center;

margin: 0px auto;

top: 0px; left: 0px;

bottom: 0px;

right: 0px;

z-index: 1050;

}

.modal_wrapper{

display: table;

overflow: auto;

overflow-y: scroll;

height: 100%;

-webkit-overflow-scrolling: touch;

outline: 0;

text-align: center;

margin: 0px auto; }

.modal-dialog{

margin-top: 0px;

display: table-cell;

vertical-align: middle;

margin: 0px 20px; }

如果要去掉渐变效果，可以使用下面样式

.modal.fade .modal-dialog {

transform: translate(0, 0%) !important;

-ms-transform: translate(0, 0%) !important;

-webkit-transform: translate(0, 0%) !important; }

如果在bootstrap3(只是在v3.0.3测试过)下载的文档中JavaScript插件 · Bootstrap.html原文件中修改模态框，实现上下居中效果，只需要在本页面添加下面代码测试：

css样式：

.modal_wrapper{

display: table;

height: 100%;

margin: 0px auto;

}

.modal-dialog{

display: table-cell;

vertical-align: middle;

}

html code:

......

div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

div class="modal_wrapper"> 如果在自己的项目中使用时，可以直接将这个modal_wrapper样式放到父节点div中的class="modal fade modal_wrapper"

div class="modal-dialog" id="my-modal-dialog">

div class="modal-content">

div class="modal-header">

......

0 0