html 模态框页面居中,bootstrap 3 Modal Dialog 上下左右居中

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>

/div>

/div>

/div>

/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

fademodal_wrapper"

div

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

div

class="modal-content">

div

class="modal-header">

......