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) }