108

我的数据库内容包含不同类型的数据，例如 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>
4

15 回答 15

133

这对我有用，以上都不起作用。

.modal-dialog{
    position: relative;
    display: table; /* This is important */ 
    overflow-y: auto;    
    overflow-x: auto;
    width: auto;
    min-width: 300px;   
}
于 2016-01-28T08:52:23.673 回答
115

由于您的内容必须是动态的，您可以在模态的show事件上动态设置模态的 css 属性，这将重新调整模态的大小以覆盖其默认规范。引导的原因是使用以下 css 规则将最大高度应用于模态主体：

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

css因此，您可以使用 jquery方法动态添加内联样式：

对于较新版本的引导程序使用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

较新版本的引导程序请参阅可用的event names.

  • show.bs.modal 此事件在调用 show 实例方法时立即触发。如果由单击引起，则单击的元素可用作事件的 relatedTarget 属性。
  • shown.bs.modal 当模态对用户可见时触发此事件（将等待 CSS 转换完成）​​。如果由单击引起，则单击的元素可用作事件的 relatedTarget 属性。
  • hide.bs.modal 调用 hide 实例方法后立即触发此事件。
  • hidden.bs.modal 当模态对用户隐藏完成时触发此事件（将等待 CSS 转换完成）​​。
  • loaded.bs.modal 当模态使用远程选项加载内容时触发此事件。

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

  • Show - 此事件在调用 show 实例方法时立即触发。
  • 显示- 当模式对用户可见时触发此事件（将等待 css 转换完成）​​。
  • hide - 调用 hide 实例方法时立即触发此事件。
  • hidden - 当模式对用户完成隐藏时触发此事件（将等待 css 转换完成）​​。
于 2013-04-22T17:01:11.463 回答
22

我无法让 PSL 的答案为我工作，所以我发现我所要做的就是将包含模态内容的 div 设置为style="display: table;". 模态内容本身说明了它想要多大，并且模态可以容纳它。

于 2015-06-18T12:44:52.437 回答
11

如果您想编写 css，有很多方法可以做到这一点，然后添加以下内容

.modal-dialog{
  display: table
}

如果你想添加内联

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

不要添加display:table;到 modal-content 类。它完成了您的工作，但将您的模态配置为大尺寸请参见以下屏幕截图。如果您将样式添加到模态内容，则第一个图像是如果您将样式添加到模态对话框 如果您将样式添加到模态对话框 。它看起来很有个性。 在此处输入图像描述

于 2017-02-22T11:49:19.647 回答
7

对于 bootstrap 3 使用，例如

$('#myModal').on('hidden.bs.modal', function () {
// do something…
})
于 2013-08-13T13:55:39.520 回答
4

简单的 CSS 为我工作

.modal-dialog { 
max-width : 100% ;
}
于 2015-06-04T10:25:06.050 回答
2

我只是覆盖了css：

.modal-dialog {
    max-width: 1000px;
}
于 2018-02-01T22:58:25.520 回答
2

width:fit-content在模态 div 上设置。

于 2019-05-04T13:51:46.203 回答
1

如果您使用来自 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>

如果您将 resizable 设置为 true，您还可以允许用户控制大小。您可以在http://gijgo.com/Dialog/Demos/bootstrap-modal-resizable看到有关此的演示

于 2016-10-31T08:47:54.013 回答
1

一个简单的 CSS 解决方案，将垂直和水平居中模式：

.modal.show {
  display: flex !important;
  justify-content: center;
}

.modal-dialog {
  align-self: center;
}
于 2019-04-19T18:57:19.823 回答
0

对于 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;');
  });
于 2016-02-18T23:30:27.207 回答
0

我在 bootstrap 3 中遇到了同样的问题，并且模态体 div 的高度不想大于 442px。在我的情况下，这就是修复它所需的所有 css：

.modal-body {
    overflow-y: auto;
}
于 2017-11-15T08:58:08.427 回答
0

我的解决方案只是添加以下样式。 <div class="modal-body" style="clear: both;overflow: hidden;">

于 2018-09-28T06:38:33.137 回答
0

从 Bootstrap 4 开始 - 它具有以下风格：

@media (min-width: 576px)
.modal-dialog {
    max-width: 500px;
}

因此，如果您希望将模态宽度调整为更大的宽度，我建议在您的 css 中使用它，例如：

.modal-dialog { max-width: 87vw; }

请注意，设置width: 87vw;不会覆盖引导程序的max-width: 500px;.

于 2019-05-10T18:56:08.940 回答
0

我的搜索把我带到了这里，所以不妨加上我两美分的想法。如果您使用的是Monkey 友好的 Twitter Bootstrap 模式，那么您可以执行以下操作：

    var dialog = new BootstrapDialog({
        id: 'myDialog',
        title: 'Title',
        closable: false,
        // whatever you like configuration here...
    });

    dialog.realize();
    if (isContentAYoutubeVideo()) {
        dialog.getModalDialog().css('width', '80%'); // set the width to whatever you like
    }
    dialog.open();

希望这可以帮助。

于 2020-06-03T14:22:08.173 回答