栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 面试经验 > 面试问答

如何根据内容动态调整Twitter Bootstrap模式的大小

面试问答 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

如何根据内容动态调整Twitter Bootstrap模式的大小

由于您的内容必须是动态的,因此可以在模态

show
事件发生时动态设置模态的css属性,这将调整模态的大小,从而覆盖其默认规格。被引导的原因是使用css规则将最大高度应用于模态主体,如下所示:

.modal-body {    position: relative;    overflow-y: auto;    max-height: 400px;    padding: 15px;}

因此,您可以使用jquery

css
方法动态添加内联样式:

对于较新版本的引导程序,请使用

show.bs.modal

$('#modal').on('show.bs.modal', function () {       $(this).find('.modal-body').css({   width:'auto', //probably not needed   height:'auto', //probably not needed    'max-height':'100%'       });});

对于旧版本的引导程序使用

show

$('#modal').on('show', function () {       $(this).find('.modal-body').css({   width:'auto', //probably not needed   height:'auto', //probably not needed    'max-height':'100%'       });});

或使用CSS规则覆盖:

.autoModal.modal .modal-body{    max-height: 100%;}

并将此类添加

autoModal
到您的目标模态。

在小提琴中动态更改内容,您将看到模态相应地调整大小。

[Demo](http://jsfiddle.net/GDVdN/)

较新版本的bootstrap请参阅可用的

eventnames

  • show.bs.modal 调用show实例方法时,将立即触发此事件。如果是由单击引起的,则clicked元素可用作事件的relatedTarget属性。
  • shown.bs.modal 当模态对用户可见时将触发此事件(将等待CSS转换完成)​​。如果是由单击引起的,则clicked元素可用作事件的relatedTarget属性。
  • hide.bs.modal 调用hide实例方法后,立即触发此事件。
  • hidden.bs.modal 模态已向用户隐藏(当等待CSS转换完成时),将触发此事件。
  • load.bs.modal 当模态使用remote选项加载了内容时,将触发此事件。

[modal events](http://twitter.github.io/bootstrap/javascript.html#modals)
支持较旧版本的引导程序。

  • Show- 调用show实例方法时,立即触发此事件。
  • 显示 -当模式对用户可见时将触发此事件(将等待CSS转换完成)​​。
  • hide- 调用hide实例方法后,立即触发此事件。
  • hidden- 模态已向用户隐藏完成时将触发此事件(将等待CSS转换完成)​​。


转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/575725.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号