`
懒乔治
  • 浏览: 3279 次
  • 性别: Icon_minigender_1
  • 来自: 西安
社区版块
存档分类
最新评论

关于bootstrap单页面中多Modal的问题

    博客分类:
  • css
 
阅读更多

       在web苦海中前行真的是一件十分煎熬但又开心的事,煎熬是因为时常被小bug和杂七杂八的兼容性影响,而开心是因为终于大学毕业可以拿转正工资了。大笑

       步入正轨,在做毕设时我在单页面中新建用户采用modal而判断添加成功后还采用modal提示成功后右边的滚动条会出来俩条,覆盖整个body的阴影瞬间变暗。真的是哔了dog,如今在公司又出现了阴影的问题所以我观察了源码后发现 ,bootstrap.js文件中modal的遮罩层函数如下:

      

 Modal.prototype.backdrop = function (callback) {
  var that = this
  var animate = this.$element.hasClass('fade') ? 'fade' : ''

if (this.isShown && this.options.backdrop) {
    var doAnimate = $.support.transition && animate

this.$backdrop = $(document.createElement('div'))
      .addClass('modal-backdrop ' + animate)
      .appendTo(this.$body)
    ...
 }

后面还有balabala一大串,但这些就足够分析了。在单击modal后会有一个叫modal-backdrop的div层apped到body之后,那言下之意是不管开几个modal都会不断的向body后append叫喊,啊!怎么能这样。。。然后我简单对modal-backdrop进行处理,如下:

/**
 * Created by George on 2016/7/5.
 */
document.getElementById('ta').addEventListener('click' , function(){
    $('#myModal').modal('show');
});
document.getElementById('tt').addEventListener('click' , function(){
    $('#myModal1').modal('show');
/*
    $('#myModal').modal('hide');
*/
console.log($('.modal-backdrop').length)
    console.log($('.modal-backdrop'))
    var iLen = $('.modal-backdrop').length;
    for(var i = 0; i<iLen;i++){
        $('.modal-backdrop')[i].id = 'modal'+i;
    }
    if(iLen>1){
        for(var i =1;i<2;i++){
            $('#modal'+i).removeClass();
        }
    }
});

为每个modal-backdrop对应的div添加个id,然后找到这个div将.modal-backdrop这个removeClass()掉就行。在这里肯定会有小伙伴说不论是几个那只需要在显示当前modal的时候把剩下的hide不就可以了么?这个办法我也试了试如上代码前6行,这样做确实能达到阴影不加深的效果但是用户体验会差很多,因为hide的时候页面会刷新。

       前面还说到有多余滚动条的问题,因为这个问题当时做毕设没有深究而到了新公司换了新设备已经没有这个问题了so我就偷了下懒尴尬。不过我相信没有攻读源码还解决不了的bug,如果有那就再度一遍源码吧。。。

 

0
1
分享到:
评论

相关推荐

    iframe 内的bootstrap模态框证照父页面

    然而,在实际应用中,我们可能会遇到一些问题,比如当在`iframe`内部使用Bootstrap模态框时,模态框只会影响到`iframe`内的内容,而不会覆盖到父页面,这可能导致用户界面的不一致和交互问题。针对这个问题,我们...

    bootstrap单页面模板是一款适合科技公司单页网站模板下载。.zip

    这款“bootstrap单页面模板”特别针对科技公司设计,旨在提供一个高效且吸引人的单页网站解决方案。 首先,我们要理解什么是单页面模板。单页面网站通常只有一个长页面,通过滚动浏览内容,而不是通过点击链接在多...

    bootstrap单页面模板是一款适合科技公司单页网站模板下载。_html网站模板_网页源码移动端前端_H5模板_自适.rar

    在这个“bootstrap单页面模板”中,我们可以预见到它会包含以下关键元素: 1. **HTML 结构**:HTML(超文本标记语言)是网页的基础,用于定义页面内容和结构。这个模板将提供一个组织良好的 HTML 结构,包括头部...

    北大青鸟 Bootstrap 微票儿 项目_学习部

    这个项目可能是为了帮助学员掌握如何利用Bootstrap构建网页,特别是实现页面的响应式设计。 1. **Bootstrap简介**:Bootstrap是由Twitter开发并开源的前端框架,它提供了丰富的预定义样式、组件和JavaScript插件,...

    Bootstrap modal 多弹窗之叠加显示不出弹窗问题的解决方案

    Bootstrap Modal 是一个流行的前端框架 Bootstrap 中的组件,用于创建模态对话框。在开发过程中,有时我们需要在一个模态窗口内嵌套另一个模态窗口,即实现多层弹窗的叠加。然而,当尝试这样做时,可能会遇到一个...

    bootstrap3中文文档_cn.zip

    8. **可访问性**:Bootstrap 3 考虑到无障碍(accessibility)问题,遵循 W3C 的 Web 内容可访问性指南(WCAG),确保视障用户也能顺利使用页面。 9. **类型与文本**:框架提供了多种文本对齐方式、行高控制、强调...

    Bootstrap 模态框(Modal)带参数传值实例

    模态框(Modal)是覆盖在父窗体上的子窗体。...以上所述是小编给大家介绍的Bootstrap 模态框(Modal)带参数传值实例,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的

    bootstrap model.js 单模态框的css,js

    Bootstrap Model.js是一款基于Bootstrap框架的JavaScript插件,用于创建交互式的单模态框(modal)效果。Bootstrap本身是一个流行的前端开发框架,它提供了一系列预先设计的CSS、JS组件,帮助开发者快速构建响应式和...

    bootstrap分开的js

    "bootstrap分开的js"指的是将Bootstrap框架中的JavaScript文件进行拆分,以便于开发者根据需求灵活地引入所需的特定功能,避免加载不必要的代码,从而优化页面性能。 1. **Bootstrap Tooltip**: `bootstrap-tooltip...

    bootstrap和jQuery插件

    Bootstrap和jQuery是现代Web开发中的两个重要工具,广泛用于创建响应式、交互式的网页界面。Bootstrap是一个开源的前端框架,而jQuery则是一个高效、简洁的JavaScript库,它们的结合使用可以极大地提高开发效率。 ...

    单页面HTML5模板是一款使用bootstrap框架搭建,支持bootstrap的插件,易于定制、扩展性灵活,适合多用途网站

    在"Legend"模板中,可能包含了一系列Bootstrap的插件,如模态框(Modal)、下拉菜单(Dropdown)、轮播图(Carousel)等,这些都是Bootstrap提供的强大工具,可以极大地简化开发过程,无需从零开始编写JavaScript...

    bootstrap总结与例子

    4. **模态框** (`modal`): 使用 `.modal`、`.modal-dialog` 和 `.modal-content` 类创建弹出窗口,可以包含头、体和脚部分。 5. **下拉菜单** (`dropdown`): Bootstrap的下拉菜单可以通过 `.dropdown`、`.dropdown-...

    bootstrap-3.4.1-dist(加个关注就行).zip

    Bootstrap是世界上最受欢迎的前端开发框架之一,用于...以上就是关于Bootstrap 3.4.1的核心特性和使用方式的详细介绍。通过熟练掌握Bootstrap,开发者可以高效地构建出美观且响应式的网页,提升项目的质量和开发效率。

    Bootstrap 模态框(Modal)插件代码解析

    Bootstrap 模态框(Modal)插件 模态框(Modal)是覆盖在父窗体上的子窗体。通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等。下面通过代码给大家介绍...

    bootstrap常用功能样例

    7. **模态框**(Modal):Bootstrap的模态框是一种非侵入性的弹出窗口,可以在不离开当前页面的情况下展示额外信息或进行交互。 8. **下拉菜单**(Dropdowns):常用于导航栏中,允许用户在单个元素下展开多个选项...

    Bootstrap插件全集

    首先,Bootstrap过渡效果插件(Transition Plugin)是实现页面元素平滑过渡的基础工具。它提供了`transitionEnd`事件监听器和对CSS过渡效果的模拟,确保在不同浏览器间的一致性。如果想要单独使用这个插件,你需要...

    bootstrap3.3.4.rar

    2. JavaScript 插件:Bootstrap提供了一系列JavaScript插件,如模态框(modal)、下拉菜单(dropdowns)、轮播(carousel)等,这些都在`js`子目录中。主要文件有`bootstrap.js`和其压缩版`bootstrap.min.js`,以及...

    bootstrap行内修改demo

    5. **JavaScript插件**:为了实现行内编辑的交互功能,可能需要用到Bootstrap的JavaScript插件,如`data-toggle`属性和`modal`对话框,它们可以帮助处理用户输入的验证、数据的提交和反馈。 6. **响应式设计**:...

    BootStrap3.3.5 不同的Demo 和插件集合

    1. **栅格系统**:Bootstrap的栅格系统是其核心特性之一,它基于12列的响应式布局,允许开发者轻松创建多设备兼容的页面结构。在Demo中,你可以看到如何通过`.container`、`.row`和`.col-*-*`类来创建不同尺寸屏幕下...

    bootstrap笔记(每一个知识点都有单独的示例)非常全

    8. **JavaScript插件**:Bootstrap的JavaScript插件基于jQuery,包括折叠(collapse)、模态框(modal)、滚动spy(scrollspy)、下拉菜单(drop downs)、轮播(carousel)等,这些插件可以通过数据属性(data attributes)或...

Global site tag (gtag.js) - Google Analytics