zoukankan      html  css  js  c++  java
  • 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)
    }


  • 相关阅读:
    MySQL Lock--gap before rec insert intention waiting
    MySQL Index--InnoDB引擎的主键索引
    MySQL Binlog--事务日志和BINLOG落盘参数对磁盘IO的影响
    MySQL Partition Table--分区表优缺点
    MySQL DataType--当整数列遇到小数
    MySQL DataType--日期格式
    MySQL DataType--隐式类型转换
    MySQL Hardware--RAID卡常用信息查看
    DBA常用SQL之表空间与数据文件
    DBA常用SQL之数据库基础信息
  • 原文地址:https://www.cnblogs.com/as3lib/p/6685661.html
Copyright © 2011-2022 走看看