1，Bootstrap 模态框插件Bootbox垂直居中样式：
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Bootstrap </title><!--[if lt IE 9]><script src="/html5shiv/3.7.3/html5shiv.js"></script><script src="/respond.js/1.4.2/respond.js"></script><![endif]--><link href="/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"><script src="/jquery/1.12.4/jquery.js"></script><script src="/bootstrap/3.3.7/js/bootstrap.js"></script><script src="/bootbox.js/4.4.0/bootbox.js"></script><style>/* 模态框居中样式 */.bootbox-container {position: fixed;top: 0;right: 0;bottom: 0;left: 0;z-index: 1049;overflow-y: auto;}.bootbox-container:empty {position: static;}.modal {display: table;width: 600px;height: 100%;margin: 0 auto;}.modal-dialog {display: table-cell;vertical-align: middle;}/* //模态框居中样式 */</style><script>$(function () {/*设置bootbox*/bootbox.setLocale("zh_CN");bootbox.setDefaults({container: '.bootbox-container'});/*使用bootbox*/bootbox.dialog({message: '<img src="/images/logo_small.gif"/>'}).width(155);});</script></head><body><h1>Hello, world!</h1><!--bootbox容器--><div class="bootbox-container"></div></body></html>
2，Bootstrap模态框Modal垂直居中样式：
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Bootstrap </title><!--[if lt IE 9]><script src="/html5shiv/3.7.3/html5shiv.js"></script><script src="/respond.js/1.4.2/respond.js"></script><![endif]--><link href="/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"><script src="/jquery/1.12.4/jquery.js"></script><script src="/bootstrap/3.3.7/js/bootstrap.js"></script><script src="/bootbox.js/4.4.0/bootbox.js"></script><style>/* 模态框居中样式 */.modal {display: table;width: 600px;height: 100%;margin: 0 auto;}.modal-dialog {display: table-cell;vertical-align: middle;}/* //模态框居中样式 */</style></head><body><h2>创建模态框（Modal）</h2><!-- 按钮触发模态框 --><button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">开始演示模态框</button><!-- 模态框（Modal） --><div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"><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" id="myModalLabel">模态框（Modal）标题</h4></div><div class="modal-body"><p>在这里添加一些文本</p><p>在这里添加一些文本</p><p>在这里添加一些文本</p></div><div class="modal-footer"><button type="button" class="btn btn-default" data-dismiss="modal">关闭</button><button type="button" class="btn btn-primary">提交更改</button></div></div><!-- /.modal-content --></div><!-- /.modal --></div></body></html>
