我有数据库内容,有不同类型的数据,如Youtube视频,Vimeo视频,文本,Imgur图片等。所有这些都有不同的高度和宽度。我在搜索互联网时发现的只是将大小改为一个参数。它必须与弹出窗口中的内容相同。
这是我的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>
由于您的内容必须是动态的,您可以在模态的show
事件上动态设置模态的css属性,该事件将重新调整模态的大小,覆盖其默认规范。原因是bootstrap使用css规则将max-height应用于模态体,如下所示:
.modal-body {
position: relative;
overflow-y: auto;
max-height: 400px;
padding: 15px;
}
因此,您可以使用jquery css
方法动态添加内联样式:
对于较新版本的bootstrap,请使用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%'
});
});
对于旧版本的bootstrap,请使用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
。
支持较旧版本的bootstrap modal events。
对于Bootstrap 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;');
});
我有与bootstrap 3相同的问题,而且模态体div的高度不希望大于442px。这是在我的情况下修复它所需的所有css:
.modal-body {
overflow-y: auto;
}
Mine Solution只是添加了以下风格。 <div class="modal-body" style="clear: both;overflow: hidden;">
在模态div上设置width:fit-content
。
从Bootstrap 4开始 - 它的风格是:
@media (min-width: 576px)
.modal-dialog {
max-width: 500px;
}
因此,如果您要将模态宽度调整为更宽的某个宽度,我建议您在css中使用此示例:
.modal-dialog { max-width: 87vw; }
请注意,设置qazxsw poi不会覆盖bootstrap qazxsw poi。
这对我有用,上述都没有奏效。
.modal-dialog{
position: relative;
display: table; /* This is important */
overflow-y: auto;
overflow-x: auto;
width: auto;
min-width: 300px;
}
我无法让PSL的答案为我工作所以我发现我所要做的就是设置包含style="display: table;"
的模态内容的div。模态内容本身表示它想要的大小和模态适应它。
对于bootstrap 3使用像
$('#myModal').on('hidden.bs.modal', function () {
// do something…
})
简单的Css为我工作
.modal-dialog {
max-width : 100% ;
}
如果您使用gijgo.com的jquery对话框插件并将宽度设置为auto,则可以这样做。
$("#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>
如果将resizable设置为true,也可以允许用户控制大小。您可以在http://gijgo.com/Dialog/Demos/bootstrap-modal-resizable上看到关于此的演示
我只是覆盖了css:
.modal-dialog {
max-width: 1000px;
}
一个简单的CSS解决方案,将垂直和水平居中模式:
.modal.show {
display: flex !important;
justify-content: center;
}
.modal-dialog {
align-self: center;
}