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

我拥有数据库内容，其中包含不同类型的数据，如Youtube视频，Vimeo视频，文本，Imgur图片等。它们都有不同的高度和宽度。我在搜索互联网时发现的所有内容都将尺寸更改为只有一个参数。它必须与弹出窗口中的内容相同。如何根据内容动态调整Twitter Bootstrap模式

这是我的HTML代码。我也使用Ajax来调用内容。

<div id="modal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
    <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
     <h3 id="ModalLabel"></h3> 
    </div> 
    <div class="modal-body"> 

    </div> 
</div>

来源

2013-04-22 Erdem Ece

因为你的内容必须是动态的，你可以设置动态上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

较新版本的bootstrap请参阅可用event names。立即

show.bs.modal此事件在展会实例方法被调用。如果由于点击而导致点击的元素可用作事件的relatedTarget属性。
shown.bs.modal当模式对用户可见时（将等待CSS转换完成），将触发此事件。如果由于点击而导致点击的元素可用作事件的relatedTarget属性。
hide.bs.modal当调用隐藏实例方法时立即触发此事件。
hidden.bs.modal当模式完成对用户隐藏时（等待CSS转换完成），此事件被触发。
loaded.bs.modal当模式使用远程选项加载内容时，会触发此事件。

老版本的引导程序modal events支持。

显示 - 此事件在调用show实例方法时立即触发。
显示 - 当模式对用户可见（将等待css转换完成）时触发此事件。
hide - 当调用隐藏实例方法时立即触发此事件。
隐藏 - 当模式完成对用户隐藏（将等待css转换完成）时触发此事件。

来源

2013-04-22 17:01:11 PSL

我不得不#modal改为同.moda体现在它很好地工作。非常感谢你！ – 2013-04-22 18:23:03

没问题..很高兴为你解决了问题.. – PSL 2013-04-22 18:24:11

@PSL，+1的答案和向我介绍[kbd]（http://stackoverflow.com/editing-help#html）在SO。 – 2013-06-27 14:04:11

自举3使用像

$('#myModal').on('hidden.bs.modal', function() { 
// do something… 
})

来源

2013-08-13 13:55:39 user2678868

只要添加到这个hidden.bs.modal将在模式关闭后触发。使用show.bs.modal在模式触发时在引导3上触发 – d3c0y 2013-10-27 00:58:44

简单的CSS的工作对我来说

.modal-dialog { 
max-width : 100% ; 
}

来源

2015-06-04 10:25:06 Pascal

我不能让PSL的回答为我工作，所以我发现我所要做的就是设置举行模式内容与style="display: table;"的股利。模态内容本身说明它想要的大小和模式适应它。

来源

2015-06-18 12:44:52 Luminous

我不能' （也许是因为我使用的是Angular版本的引导程序）这对我很有用，只是要注意这种风格被添加到.modal对话框类+1 – user227353 2015-07-21 16:47:10

这工作对我来说，以上都没有工作。

.modal-dialog{ 
    position: relative; 
    display: table; /* This is important */ 
    overflow-y: auto;  
    overflow-x: auto; 
    width: auto; 
    min-width: 300px; 
}

来源

2016-01-28 08:52:23

这一个工作正是我想要的方式谢谢。 – 2016-03-12 07:12:09

哇。这项工作秒。但是，如何，为什么！？ – GreenAsJade 2016-04-29 12:11:04

@GreenAsJade可能这个链接可以帮助你理解： http://colintoh.com/blog/display-table-anti-hero https://www.iandevlin.com/blog/2013/06/css/css-堆叠显示表 – 2016-05-03 01:29:43

对于引导2自动调节模式高度动态

//Auto adjust modal height on open 
    $('#modal').on('shown',function(){ 
    var offset = 0; 
    $(this).find('.modal-body').attr('style','max-height:'+($(window).height()-offset)+'px !important;'); 
    });

来源

2016-02-18 23:30:27 SudarP

你可以做，如果你使用来自gijgo.com的jQuery插件对话框，设置宽度为自动。

$("#dialog").dialog({ 
 
    uiLibrary: 'bootstrap', 
 
    width: 'auto' 
 
});

<html> 
 
<head> 
 
    <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script> 
 
    <link href="http://code.gijgo.com/1.0.0/css/gijgo.css" rel="stylesheet" type="text/css"> 
 
    <script src="http://code.gijgo.com/1.0.0/js/gijgo.js"></script> 
 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> 
 
</head> 
 
<body> 
 
<div id="dialog" title="Wikipedia"> 
 
    <img src="https://upload.wikimedia.org/wikipedia/en/thumb/8/80/Wikipedia-logo-v2.svg/1122px-Wikipedia-logo-v2.svg.png" width="320"/> 
 
</div> 
 
</body> 
 
</html>

您还可以允许用户如果设置可调整大小，以真正控制大小。您可以在http://gijgo.com/Dialog/Demos/bootstrap-modal-resizable

来源

2016-10-31 08:47:54

看到关于此次演示的方法有很多，如果你想要写的CSS然后如果你想添加内嵌

<div class="modal-dialog" style="display:table;"> 
//enter code here 
</div>

添加以下

.modal-dialog{ 
    display: table 
}

如果做到这一点

不要将display:table;添加到模态内容类。它完成了你的工作，但处理你的模态大尺寸请参阅下面的截图。如果您将样式添加到模态对话框中，则第一个图像为样式。它看起来被处置。

来源

2017-02-22 11:49:19

我有与引导程序3相同的问题和模态身体div的高度不希望大于442px。这是为了解决它在我的情况下所需要的所有CSS：

.modal-body { 
    overflow-y: auto; 
}

来源

2017-11-15 08:58:08

我只是覆盖CSS：

.modal-dialog { 
    max-width: 1000px; 
}

来源

2018-02-01 22:58:25

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

回答

相关问题