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

How to resize Twitter Bootstrap modal dynamically based on the content

提问by Erdem Ece

I have database content which has different types of data, such as Youtube videos, Vimeo videos, text, Imgur pictures, etc. All of them have different heights and widths. All I have found while searching the Internet is changing the size to only one parameter. It has to be same as the content in the popup.

我有包含不同类型数据的数据库内容，例如 Youtube 视频、Vimeo 视频、文本、Imgur 图片等。它们都有不同的高度和宽度。我在互联网上搜索时发现的所有内容都是将大小更改为只有一个参数。它必须与弹出窗口中的内容相同。

This is my HTML code. I also use Ajax to call the content.

这是我的 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> 

回答by Amit Shah

This worked for me, none of the above worked.

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

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

回答by PSL

Since your content must be dynamic you can set the css properties of the modal dynamically on showevent of the modal which will re-size the modal overriding its default specs. Reason being bootstrap applies a max-height to the modal body with the css rule as below:

由于您的内容必须是动态的，您可以在模态show事件发生时动态设置模态的 css 属性，这将重新调整模态的大小，覆盖其默认规格。引导的原因使用如下 css 规则将 max-height 应用于模态主体：

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

So you can add inline styles dynamically using jquery cssmethod:

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

For newer versions of bootstrap use show.bs.modal

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

For older versions of bootstrap use show

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

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

or use a css rule to override:

或使用 css 规则覆盖：

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

and add this class autoModalto your target modals.

并将此类添加autoModal到您的目标模态。

Change the content dynamically in the fiddle, you will see the modal getting resized accordingly. Demo

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

Newer version of bootstrap see the available event names.

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

• show.bs.modalThis event fires immediately when the show instance method is called. If caused by a click, the clicked element is available as the relatedTarget property of the event.
• shown.bs.modalThis event is fired when the modal has been made visible to the user (will wait for CSS transitions to complete). If caused by a click, the clicked element is available as the relatedTarget property of the event.
• hide.bs.modalThis event is fired immediately when the hide instance method has been called.
• hidden.bs.modalThis event is fired when the modal has finished being hidden from the user (will wait for CSS transitions to complete).
• loaded.bs.modalThis event is fired when the modal has loaded content using the remote option.

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

Older version of bootstrap modal eventssupported.

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

• Show- This event fires immediately when the show instance method is called.
• shown- This event is fired when the modal has been made visible to the user (will wait for css transitions to complete).
• hide- This event is fired immediately when the hide instance method has been called.
• hidden- This event is fired when the modal has finished being hidden from the user (will wait for css transitions to complete).

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

回答by Luminous

I couldn't get PSL's answer working for me so I found all I have to do is set the div holding the modal content with style="display: table;". The modal content itself says how big it wants to be and the modal accommodates it.

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

回答by waqas ali

There are many ways to do this if you want to write css then add following

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

.modal-dialog{
  display: table
}

In case if you want to add inline

如果您想添加内联

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

Don't add display:table;to modal-content class. it done your job but disposition your modal for large size see following screenshots. first image is if you add style to modal-dialog if you add style to modal-content. it looks dispositioned.

不要添加display:table;到模态内容类。它完成了您的工作，但将您的模态配置为大尺寸，请参见以下屏幕截图。第一张图片是如果您将样式添加到模态对话框， 如果您将样式添加到模态内容。它看起来很有气质。

回答by user2678868

for bootstrap 3 use like

对于引导程序 3 使用，例如

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

回答by Pascal

Simple Css work for me

简单的 CSS 为我工作

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

回答by Subhashis Pal

set width:fit-contenton the modal div.

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

回答by Andrew Gale

I simply override the css:

我只是覆盖了 css：

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

回答by Atanas Atanasov

You can do that if you use jquery dialog plugin from gijgo.com and set the width to auto.

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

You can also allow the users to control the size if you set resizable to true. You can see a demo about this at http://gijgo.com/Dialog/Demos/bootstrap-modal-resizable

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

回答by Kirk Ross

A simple CSS solution that will vertically and horizontally center the modal:

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

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

.modal-dialog {
  align-self: center;
}