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


bootstrap modal模态框的运用的更多相关文章

  1. 重置 Bootstrap modal 模态框数据

    利用 Bootstrap modal 模态框弹层添加或编辑数据,第二次弹出模态框时总是记住上一次的数据值,stackoverflow 上找到个比较好的方法,就是利用 jQuery 的 clone 方法 ...

  2. 关于【bootstrap modal 模态框弹出瞬间消失的问题】

    前提是你没有重复引入bootstrap.js\bootstrap.min.js和modal.js.一下提供一个小例子. <button class="btnbtn-primary bt ...

  3. Bootstrap modal模态框关闭时,combobox input下拉框仍然保留在页面上

    问题描述: 当点击模态框的关闭按钮时,下拉框中的内容没有消失,而是移动到了页面左上角 分析:这个问题的定位在于是用的哪种模态框,bootstrap和easyui都可以实现模态框,但是两个方法实现的模态 ...

  4. 修改bootstrap modal模态框的宽度

    原文链接:http://blog.csdn.net/wuhawang/article/details/52252912 修改模态框的宽度很简单,修改width属性就可以了 但是要注意的一点是,修改的不 ...

  5. Bootstrap modal 模态框垂直居中显示补丁

    <script> $.fn.modal.Constructor.prototype.adjustDialog1 = function(){ var modalIsOverflowing = ...

  6. 设置bootstrap modal模态框的宽度和宽度

    (1)修改宽度可以通过修改modal中的modal-dialog这个div宽度实现 <div class="modal-dialog" style="width:6 ...

  7. bootstrap Modal 模态框垂直居中

    解决 Modal 垂直居中的问题,上网找了好多博客,有好多说改源码的,这个并没有实践. 但发现另一种解决办法,可以实现,代码如下: function centerModals(){ $('.modal ...

  8. Bootstrap 实例 - 模态框(Modal)插件

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  9. 黄聪:bootstrap中模态框modal在苹果手机上会失效

    bootstrap中模态框在苹果手机上会失效 可将代码修改为<a  data-toggle="modal" data-target="#wrap" hre ...

随机推荐

  1. 『PyTorch』第十弹_循环神经网络

    RNN基础: 『cs231n』作业3问题1选讲_通过代码理解RNN&图像标注训练 TensorFlow RNN: 『TensotFlow』基础RNN网络分类问题 『TensotFlow』基础R ...

  2. 10046 event 知多少

    10046 event 知多少 2017年5月10日 10:08 1.在当前session级打开trace 适用于SQL语句可以在新的session创建后再运行. 在session级收集10046 t ...

  3. 一个SQL调优/优化(SQL TUNING)“小把戏”“哄得”小朋友挺满意

    前几天,去一个用户那里,解决完问题,和一个小朋友闲聊,他有点愁眉不展.郁郁寡欢的样子,似乎没心情和我说话,之前,他的话是最多的,见此状,我就问:怎么了?小朋友?,他说,这几天应用人员说他的某个模块的性 ...

  4. consumer的DubboClientHandler线程池

    1. 创建线程池 创建线程池的调用栈如下: SimpleDataStore把线程池存放在map中. public class NettyClient extends AbstractClient { ...

  5. top k

    def top_k(arr, left, right, k): if left >= right: return pivot = arr[right] index = left for i in ...

  6. Laravel中不可逆的加密方法

    1 //对 A 密码使用Bcrypt 加密 2 $password = Hash::make('secret'); 3 4 //你也可直接使用 bcrypt 的 function 5 $passwor ...

  7. json批量设置DIV属性

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  8. SQL Server 对比数据库差异

    一.视图和存储过程比较 [原理]利用系统表“sysobjects"和系统表“syscomments”,将数据库中的视图和存储过程进行对比.系统表"sysobjects"之 ...

  9. EhLib 的 DbgridEh 影响 其他数据集的Open方法

    DbgridEh 对应数据集ADOTable1,其中有个字段 部门编码,另外增加查找字段比如 部门名称 ADOTable2对应查找数据集,包含 部门编码和 部门名称字段. ADOTable1 打开后, ...

  10. Ubuntu中使用WPS

    ubunu系统下用WPS办公软件比较好,比较兼容MS office, ubuntu下WPS相关命令有:et,wps,wpp. 使用Ctrl+Alt+T打开命令端, "et"命令可以 ...