blocks|key|114936|text|这对我来说很管用，上面的这些都不管用。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|114937|.modal-dialog{
++++position:+relative;
++++display:+table;+/*+This+is+important+*/+
++++overflow-y:+auto;++++
++++overflow-x:+auto;
++++width:+auto;
++++min-width:+300px;+++
}|code-block|syntax|javascript|114938|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>This worked for me, none of the above worked.</p>

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


blocks|key|332419|text|我不能让PSL的答案为我工作，所以我发现我所要做的就是用style="display:+table;"设置包含模式内容的div。模态内容本身说明了它想要的大小，并且模态容纳了它。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|332420|entityMap^0|S|N|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|K|8|@]|D|@]|E|$]]]|G|$]]

<p>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 <code>style="display: table;"</code>. The modal content itself says how big it wants to be and the modal accommodates it.</p>


blocks|key|332594|text|如果你想编写css，有很多方法可以做到这一点，然后添加以下内容|type|unstyled|depth|inlineStyleRanges|entityRanges|data|332595|.modal-dialog{
++display:+table
}|code-block|syntax|javascript|332596|以防您想要添加内联|332597|<div+class="modal-dialog"+style="display:table;">
//enter+code+here
</div>|332598|不要将display:table;添加到modal-content类中。它完成了你的工作，但配置你的大尺寸的模式，见下面的截图。第一张图片是如果你添加样式到模式对话框中|offset|length|style|CODE|332599|📷|atomic|332600|如果您将样式添加到modal-content。它看起来像是错位的。|332601|332602|​|332603|entityMap|0|IMAGE|mutability|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/ca31fe4a882e3c050a79c9683bbf7dec.png|imageAlt|1|https://ask.qcloudimg.com/http-save/yehe-900000/77da355950fb2dcb51f9638010bdf99d.png^0|0|0|0|0|3|E|0|0|1|0|0|0|0|1|1|0|0^^$0|@$1|2|3|4|5|6|7|19|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|1A|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|1B|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|1C|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|1D|8|@$M|1E|N|1F|O|P]]|9|@]|A|$]]|$1|Q|3|R|5|S|7|1G|8|@]|9|@$M|1H|N|1I|1|1J]]|A|$]]|$1|T|3|U|5|6|7|1K|8|@]|9|@]|A|$]]|$1|V|3|R|5|S|7|1L|8|@]|9|@$M|1M|N|1N|1|1O]]|A|$]]|$1|W|3|X|5|6|7|1P|8|@]|9|@]|A|$]]|$1|Y|3|-4|5|6|7|1Q|8|@]|9|@]|A|$]]]|Z|$10|$5|11|12|13|A|$14|15|16|-4]]|17|$5|11|12|13|A|$14|18|16|-4]]]]

<p>There are many ways to do this if you want to write css then add following</p>

<pre><code>.modal-dialog{
  display: table
}
</code></pre>

<p>In case if you want to add inline </p>

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

<p>Don't add <code>display:table;</code> 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
<a href="https://i.stack.imgur.com/lxiGo.png" rel="noreferrer"><img src="https://i.stack.imgur.com/lxiGo.png" alt="In case if you add style to modal-dialog"></a>
if you add style to modal-content. it looks dispositioned.
<a href="https://i.stack.imgur.com/2mURD.png" rel="noreferrer"><img src="https://i.stack.imgur.com/2mURD.png" alt="enter image description here"></a></p>


blocks|key|114833|text|对于bootstrap+3，请使用下面的命令|type|unstyled|depth|inlineStyleRanges|entityRanges|data|114834|$('#myModal').on('hidden.bs.modal',+function+()+{
//+do+something…
})|code-block|syntax|javascript|114835|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>for bootstrap 3 use like</p>

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


blocks|key|332370|text|简单的Css适合我|type|unstyled|depth|inlineStyleRanges|entityRanges|data|332371|.modal-dialog+{+
max-width+:+100%25+;
}|code-block|syntax|javascript|332372|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Simple Css work for me </p>

<pre><code>.modal-dialog { 
max-width : 100% ;
}
</code></pre>


blocks|key|115178|text|我只需覆盖css：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|115179|.modal-dialog+{
++++max-width:+1000px;
}|code-block|syntax|javascript|115180|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>I simply override the css:</p>

<pre><code>.modal-dialog {
    max-width: 1000px;
}
</code></pre>


blocks|key|332808|text|在模式div上设置width:fit-content。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|332809|entityMap^0|9|H|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|K|8|@]|D|@]|E|$]]]|G|$]]

<p>set <code>width:fit-content</code> on the modal div.</p>


blocks|key|332466|text|如果您使用gijgo.com中的jquery对话框插件并将宽度设置为auto，则可以做到这一点。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|332467|​|332468|$("#dialog").dialog({
++uiLibrary:+'bootstrap',
++width:+'auto'
});|code-block|syntax|javascript|332469|<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>|332470|332471|如果将resizable设置为true，还可以允许用户控制大小。你可以在http://gijgo.com/Dialog/Demos/bootstrap-modal-resizable上看到关于这一点的演示|offset|length|332472|entityMap|0|LINK|mutability|MUTABLE|url|http://gijgo.com/Dialog/Demos/bootstrap-modal-resizable^0|0|0|0|0|0|10|1J|0|0^^$0|@$1|2|3|4|5|6|7|X|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Y|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Z|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|10|8|@]|9|@]|A|$G|H]]|$1|K|3|C|5|6|7|11|8|@]|9|@]|A|$]]|$1|L|3|M|5|6|7|12|8|@]|9|@$N|13|O|14|1|15]]|A|$]]|$1|P|3|-4|5|6|7|16|8|@]|9|@]|A|$]]]|Q|$R|$5|S|T|U|A|$V|W]]]]

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

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$("#dialog").dialog({
  uiLibrary: 'bootstrap',
  width: 'auto'
});</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
&lt;head&gt;
  &lt;script src="https://code.jquery.com/jquery-2.1.4.min.js"&gt;&lt;/script&gt;
  &lt;link href="http://code.gijgo.com/1.0.0/css/gijgo.css" rel="stylesheet" type="text/css"&gt;
  &lt;script src="http://code.gijgo.com/1.0.0/js/gijgo.js"&gt;&lt;/script&gt;
    &lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css" /&gt;
&lt;/head&gt;
&lt;body&gt;
 &lt;div id="dialog" title="Wikipedia"&gt;
   &lt;img src="https://upload.wikimedia.org/wikipedia/en/thumb/8/80/Wikipedia-logo-v2.svg/1122px-Wikipedia-logo-v2.svg.png" width="320"/&gt;
 &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
</div>
</div>
</p>

<p>You can also allow the users to control the size if you set resizable to true. You can see a demo about this at <a href="http://gijgo.com/Dialog/Demos/bootstrap-modal-resizable" rel="nofollow">http://gijgo.com/Dialog/Demos/bootstrap-modal-resizable</a></p>


blocks|key|332761|text|一个简单的CSS解决方案，将垂直和水平居中的模式：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|332762|.modal.show+{
++display:+flex+!important;
++justify-content:+center;
}

.modal-dialog+{
++align-self:+center;
}|code-block|syntax|javascript|332763|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>A simple CSS solution that will vertically and horizontally center the modal:</p>

<pre class="lang-css prettyprint-override"><code>.modal.show {
  display: flex !important;
  justify-content: center;
}

.modal-dialog {
  align-self: center;
}
</code></pre>


blocks|key|115127|text|我在bootstrap+3上也遇到了同样的问题，而且modal-body+div的高度不想大于442px。在我的例子中，这就是修复它所需的全部css：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|115128|.modal-body+{
++++overflow-y:+auto;
}|code-block|syntax|javascript|115129|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>I had the same problem with bootstrap 3 and the modal-body div's height not wanting to be greater than 442px.  This was all the css needed to fix it in my case:</p>

<pre><code>.modal-body {
    overflow-y: auto;
}
</code></pre>


blocks|key|332725|text|我的解决方案就是添加下面的样式。<div+class="modal-body"+style="clear:+both;overflow:+hidden;">|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|332726|entityMap^0|G|1Q|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|K|8|@]|D|@]|E|$]]]|G|$]]

<p>Mine Solution was just to add below style.
<code>&lt;div class="modal-body" style="clear: both;overflow: hidden;"&gt;</code></p>


blocks|key|332869|text|我的搜索将我带到了这里，所以我不妨补充一下我的两分钱的想法。如果你使用的是Monkey+friendly+Twitter+Bootstrap+modal，那么你可以这样做：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|332870|++++var+dialog+=+new+BootstrapDialog({
++++++++id:+'myDialog',
++++++++title:+'Title',
++++++++closable:+false,
++++++++//+whatever+you+like+configuration+here...
++++});

++++dialog.realize();
++++if+(isContentAYoutubeVideo())+{
++++++++dialog.getModalDialog().css('width',+'80%25');+//+set+the+width+to+whatever+you+like
++++}
++++dialog.open();|code-block|syntax|javascript|332871|希望这能有所帮助。|332872|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/nakupanda/bootstrap3-dialog^0|11|13|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@$A|T|B|U|1|V]]|C|$]]|$1|D|3|E|5|F|7|W|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|X|8|@]|9|@]|C|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|C|$]]]|L|$M|$5|N|O|P|C|$Q|R]]]]

<p>My search led me here so might as well add my two cents worth of idea. If you are using <a href="https://github.com/nakupanda/bootstrap3-dialog" rel="nofollow noreferrer">Monkey friendly Twitter Bootstrap modal</a> then you can do something like this:</p>

<pre><code>    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();
</code></pre>

<p>Hope this helps.</p>


<p>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. </p>

<p>This is my HTML code. I also use Ajax to call the content.</p>

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

    &lt;/div&gt;
&lt;/div&gt; 
</code></pre>


How to resize Twitter Bootstrap modal dynamically based on the content

数据库

我有数据库内容，其中有不同类型的数据，如Youtube视频，Vimeo视频，文本，Imgur图片等。所有这些都有不同的高度和宽度。当我在互联网上搜索的时候，我发现只有一个参数的大小改变了。它必须与弹出窗口中的内容相同。这是我的HTML代码。我还使用Ajax来调用内容。<div id="modal" class="modal hide fade" tabindex="-1" role="dialog

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

回答 12

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 12

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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