整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
点击按钮时modal的位置看起来很不舒服， 解决办法总结有两：
1.使用modal 弹出事件方法；
从官方文档中可以了解到， modal组件有不少事件接口：
其中 “shown.bs.modal”可以在弹窗框出现后 做一些处理， 更改弹出框的样式当然是可以的：
<script type="text/javascript">
$(function(){
// dom加载完毕
var $m_btn=$(‘#modalBtn‘);
var $modal=$(‘#myModal‘);
$m_btn.on(‘click‘, function(){
$modal.modal({backdrop: ‘static‘});
});
// 测试 bootstrap 居中
$modal.on(‘shown.bs.modal‘, function(){
var $this=$(this);
var $modal_dialog=$this.find(‘.modal-dialog‘);
var m_top=( $(document).height() - $modal_dialog.height() )/2; $modal_dialog.css({‘margin‘: m_top + ‘px auto‘});
});
});
</script>
该实现方式 弹出框是居中了， 但弹出时有一些迟疑后抖动到中部；不是特别理想， 接下来试试第二种方式；
2.修改bootstrap.js 源码；
带着问题读js库源码， 往往能学到不少知识；本着怎样让 modal组件自动居中目的， 开始跟踪组件弹窗时对应的事件；
打开bootstrap.js ctrl+f 找到 modal对应代码：
弹出框出现时， 调用的自然是 Modal.prototype.show() 方法， 而show 方法中又调用了 that.adjustDialog() 方法：
以上代码看来，官方要实现 垂直居中简直太容易， 而他们没有， 只能说国外同行网站布局观跟俺们还是有区别的。加上少量代码：
Modal.prototype.adjustDialog=function () {
var modalIsOverflowing=this.$element[0].scrollHeight> document.documentElement.clientHeight
this.$element.css({
paddingLeft:!this.bodyIsOverflowing&&modalIsOverflowing?this.scrollbarWidth:'',
paddingRight: this.bodyIsOverflowing &&!modalIsOverflowing?this.scrollbarWidth:''
})
// 是弹出框居中...
var $modal_dialog=$(this.$element[0]).find(' .modal-dialog' );
var m_top=( $(document).height() - $modal_dialog.height() )/2; $modal_dialog.css({'margin' : m_top + 'px auto'});
}
然后就实现modal垂直居中了， 效果图：
bootstrap是个前端懒人神器，样式舒服，布局顺畅，但是自带的modal模态框默认是水平居中，但是垂直位置偏页面上方。如果想要实现水平并且垂直居中的效果，需要自己写个css样式重新定义一下位置。官方给的例子中模态框的默认id是myModal，默认带有固定定位（position:fixed;）的样式。
咱们只需在自己的css中重写一下这个样式即可:
#myModal{
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
经过重新定义后会发现在移动端模态框的宽度太小了，我们还可以继续优化一下，设置一个最小宽度，最终代码如下：
#myModal{
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
min-width:80%;/*这个比例可以自己按需调节*/
}
其他需要的样式可以继续自由发挥。
【本文来自 孙琪峥博客 http://www.sunqizheng.com/，想获取更好的页面浏览效果或者有任何问题请进入博客，同时也可在博主评论区进行留言，让博主为大家答疑解惑~】
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>常用样式</title>
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css"/>
</head>
<body>
<!--
常用样式
1.标题
bootstrap对h1-h6的标题效果进行覆盖
提供了对应的类名，为非标题元素设置样式
.h1~.h6
副标题 small标签 或 .small类名
2.段落
通过.lead 来突出强调内容(其作用就是增大
文本字号，加粗文本，而且对行高和margin
也做了相应处理)
3.强调
.text-muted: 提示，使用浅灰色(#999)
.text-primary: 主要，使用蓝色(#428bca)
.text-success: 成功，使用浅绿色(#3c763d)
.text-info: 通知信息，使用浅蓝色(#31708f)
.text-warning: 警告，使用黄色(#8a6d3b)
.text-danger: 危险，使用褐色(#a94442)
4.对齐效果
Bootstrap通过定义四个类名来控制文本的对齐风格
.text-left: 左对齐
.text-center: 居中对齐
.text-right: 右对齐
.text-justify: 两端对齐
-->
<!--标题-->
<h1>标题1 <small>副标题</small></h1>
<h2>标题2 <span class="small">副标题2</span></h2>
<h3>标题3</h3>
<div class="h1">你好，Bootstrap</div>
<hr/>
<!--段落-->
<p>通过.lead 来突出强调内容(其作用就是增大
文本字号，加粗文本，而且对行高和margin
也做了相应处理)</p>
<p class="lead">通过.lead 来突出<small>强调</small>
<b>内容</b>(其作用就是<strong>增大</strong>文本)
</p>
<hr/>
<!--强调-->
<div class="text-muted">.text-muted: 提示，使用浅灰色(#999)</div>
<div class="text-primary">.text-primary: 主要，使用蓝色(#428bca)</div>
<div class="text-success">.text-success: 成功，使用浅绿色(#3c763d)</div>
<div class="text-info">.text-info: 通知信息，使用浅蓝色(#31708f)</div>
<div class="text-warning">.text-warning: 警告，使用黄色(#8a6d3b)</div>
<div class="text-danger">.text-danger: 危险，使用褐色(#a94442)</div>
<hr/>
<!--对齐-->
<p style="text-align:right;">Bootstrap通过定义四个类名来控制文本的对齐风格</p>
<p class="text-left">左对齐 - Bootstrap通过定义四个类名来控制文本的对齐风格</p>
<p class="text-right">右对齐 - Bootstrap通过定义四个类名来控制文本的对齐风格</p>
<p class="text-center">居中对齐 - Bootstrap通过定义四个类名来控制文本的对齐风格</p>
</body>
</html>*请认真填写需求信息，我们会在24小时内与您取得联系。
