bootstrap modal模态框的运用

http://www.ziqiangxuetang.com/bootstrap/bootstrap-modal-plugin.html

方法

下面是一些可与 modal() 一起使用的有用的方法。

方法

描述

实例

Options: .modal(options)

把内容作为模态框激活。接受一个可选的选项对象。

1 2 3

$('#identifier').modal({ keyboard: false })

Toggle: .modal('toggle')

手动切换模态框。

1	$('#identifier').modal('toggle')

Show: .modal('show')

手动打开模态框。

1	$('#identifier').modal('show')

Hide: .modal('hide')

手动隐藏模态框。

1	$('#identifier').modal('hide')

bootstrap3打开modal后下层网页内容出现右移

1,注意看BS3的modal，有这么一个样式，当打开的时候，会给body加上modal-open，于是y滚动条没了，页面宽度变大，自然元素就右移了，我图省事，直接重写了这个属性为intial解决了

.modal-open {
  overflow: hidden;
}

.modal-open{
    overflow: inherit ;
}

且在调用

$("#myModal").modal();

后追加

$("body").css('padding-right','0px');

3,因为modal会给body添加的modal-open类，使得overflow属性默认为hidden，导致滚动条消失了。（溢出部分直接hidden了）

解决方法：

覆盖原有属性：

.modal-open {
  overflow: initial !important;
}

或 在body上挂上新的类，如下设置：

 

.fix-modal-open {
  overflow: initial;
}

4，在一个modal框里点击关闭，打开另一个modal框，设置了上面的也不管用，paddingright又不对了。于是查看bootstrap.js，发现了个地方，修改为0就行了

function init_website(){
   $('#g-top-log').click(function(){
      $('#g-top-logModal').modal();
   });
   $('#g-top-reg').click(function(){
      $('#g-top-regModal').modal();
   });
   $('#btnToReg').click(function(){
      $('#g-top-logModal').modal('hide');
      $('#g-top-regModal').modal();
   });
}
下面的函数修改为0,就行了

Modal.prototype.setScrollbar = function () {
  var bodyPad = parseInt((this.$body.css('padding-right') || 0), 10)
  this.originalBodyPad = document.body.style.paddingRight || ''
  //if (this.bodyIsOverflowing) this.$body.css('padding-right', bodyPad + this.scrollbarWidth)
  if (this.bodyIsOverflowing) this.$body.css('padding-right', 0)
}