blocks|key|1118475|text|我刚刚使用JQuery+1.4.1和UI+1.8rc1编写了一个小示例应用程序。我所做的就是将构造函数指定为：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1118476|var+theDialog+=+$(".mydialog").dialog({
++++++++autoOpen:+false,
++++++++resizable:+false,
++++++++modal:+true,
++++++++width:'auto'
});|code-block|syntax|javascript|1118477|我知道你说这使它占据了浏览器窗口的100%25宽度，但它在FF3.6，Chrome和IE8上测试过后，在这里工作得很好。|1118478|我没有进行AJAX调用，只是手动更改对话框的HTML，但我不认为这会导致任何问题。其他的css设置会不会影响到这一点呢？|1118479|唯一的问题是它使宽度偏离中心，但我发现了这个support+ticket，他们提供了一个解决方法，将dialog('open')语句放在setTimeout中来解决这个问题。|offset|length|style|CODE|1118480|下面是我的head标签的内容：|1118481|<script+type="text/javascript"+src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script+type="text/javascript"+src="jquery-ui.min.js"></script>
<link+href="jquery-ui.css"+rel="stylesheet"+type="text/css"+/>
<script+type="text/javascript">
++++$(function(){
++++++++var+theDialog+=+$(".mydialog").dialog({
++++++++++++autoOpen:+false,
++++++++++++resizable:+false,
++++++++++++modal:+true,
++++++++++++width:+'auto'
++++++++});

++++++++$('#one').click(function(){
++++++++++++theDialog.html('some+random+text').dialog('open');
++++++++});

++++++++$('#two').click(function(){
++++++++++++theDialog.html('<ul><li>Apple</li><li>Orange</li><li>Banana</li><li>Strawberry</li><li>long+text+string+to+see+if+width+changes</li></ul>').dialog('open');
++++++++});

++++++++$('#three').click(function(){
++++++++++++//this+is+only+call+where+off-centre+is+noticeable+so+use+setTimeout
++++++++++++theDialog.html('<img+src="./random.gif"+width="500px"+height="500px"+/>');
++++++++++++setTimeout(function(){+theDialog.dialog('open')+},+100);;
++++++++});
+++++});
</script>|1118482|我从http://jquery-ui.googlecode.com/files/jquery-ui-1.8rc1.zip下载了Jquery+UI的js和css。和身体：|1118483|<div+class='mydialog'></div>
<a+href='#'+id='one'>test1</a>
<a+href='#'+id='two'>test2</a>
<a+href='#'+id='three'>test3</a>|1118484|entityMap|0|LINK|mutability|MUTABLE|url|http://dev.jqueryui.com/ticket/4053|1|http://jquery-ui.googlecode.com/files/jquery-ui-1.8rc1.zip^0|0|0|0|0|1E|E|M|E|0|0|0|0|2|1M|1|0|0^^$0|@$1|2|3|4|5|6|7|18|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|19|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|1A|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|1B|8|@]|9|@]|A|$]]|$1|K|3|L|5|6|7|1C|8|@$M|1D|N|1E|O|P]]|9|@$M|1F|N|1G|1|1H]]|A|$]]|$1|Q|3|R|5|6|7|1I|8|@]|9|@]|A|$]]|$1|S|3|T|5|D|7|1J|8|@]|9|@]|A|$E|F]]|$1|U|3|V|5|6|7|1K|8|@]|9|@$M|1L|N|1M|1|1N]]|A|$]]|$1|W|3|X|5|D|7|1O|8|@]|9|@]|A|$E|F]]|$1|Y|3|-4|5|6|7|1P|8|@]|9|@]|A|$]]]|Z|$10|$5|11|12|13|A|$14|15]]|16|$5|11|12|13|A|$14|17]]]]

<p>I've just wrote a tiny sample app using JQuery 1.4.1 and UI 1.8rc1.  All I did was specify the constructor as:</p>

<pre><code>var theDialog = $(".mydialog").dialog({
        autoOpen: false,
        resizable: false,
        modal: true,
        width:'auto'
});
</code></pre>

<p>I know you said that this makes it take up 100% width of the browser window but it works sweet here, tested in FF3.6, Chrome and IE8.  </p>

<p>I'm not making AJAX calls, just manually changing the HTML of the dialog but don't think that will cause any probs.  Could some other css setting be knocking this out?</p>

<p>The only problem with this is that it makes the width off-centre but I found this <a href="http://dev.jqueryui.com/ticket/4053" rel="noreferrer">support ticket</a> where they supply a workaround of placing the <code>dialog('open')</code> statement in a setTimeout to fix the problem.</p>

<p>Here is the contents of my head tag:</p>

<pre><code>&lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="jquery-ui.min.js"&gt;&lt;/script&gt;
&lt;link href="jquery-ui.css" rel="stylesheet" type="text/css" /&gt;
&lt;script type="text/javascript"&gt;
    $(function(){
        var theDialog = $(".mydialog").dialog({
            autoOpen: false,
            resizable: false,
            modal: true,
            width: 'auto'
        });

        $('#one').click(function(){
            theDialog.html('some random text').dialog('open');
        });

        $('#two').click(function(){
            theDialog.html('&lt;ul&gt;&lt;li&gt;Apple&lt;/li&gt;&lt;li&gt;Orange&lt;/li&gt;&lt;li&gt;Banana&lt;/li&gt;&lt;li&gt;Strawberry&lt;/li&gt;&lt;li&gt;long text string to see if width changes&lt;/li&gt;&lt;/ul&gt;').dialog('open');
        });

        $('#three').click(function(){
            //this is only call where off-centre is noticeable so use setTimeout
            theDialog.html('&lt;img src="./random.gif" width="500px" height="500px" /&gt;');
            setTimeout(function(){ theDialog.dialog('open') }, 100);;
        });
     });
&lt;/script&gt;
</code></pre>

<p>I downloaded the js and css for Jquery UI from <a href="http://jquery-ui.googlecode.com/files/jquery-ui-1.8rc1.zip" rel="noreferrer">http://jquery-ui.googlecode.com/files/jquery-ui-1.8rc1.zip</a>.
and the body:</p>

<pre><code>&lt;div class='mydialog'&gt;&lt;/div&gt;
&lt;a href='#' id='one'&gt;test1&lt;/a&gt;
&lt;a href='#' id='two'&gt;test2&lt;/a&gt;
&lt;a href='#' id='three'&gt;test3&lt;/a&gt;
</code></pre>


blocks|key|1118589|text|我想为对话框设置float:left会起作用。假设对话框绝对是由插件定位的，在这种情况下，它的位置将由插件决定，但浮动元素的副作用-使其仅与容纳内容所需的宽度一样宽-仍将生效。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1118590|如果你只需要像这样设置一个规则，这应该是可行的|1118591|.myDialog+{float:left}|code-block|syntax|javascript|1118592|在样式表中，尽管您可能需要使用jQuery对其进行设置|1118593|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|O|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>I imagine setting float:left for the dialog will work. Presumably the dialog is absolutely positioned by the plugin, in which case its position will be determined by this, but the side-effect of float - making elements only as wide as they need to be to hold content - will still take effect.</p>

<p>This should work if you just put a rule like</p>

<pre><code>.myDialog {float:left}
</code></pre>

<p>in your stylesheet, though you may need to set it using jQuery</p>


blocks|key|1333720|text|当我将jquery+UI升级到1.8.1而没有升级相应的主题时，我也遇到了同样的问题。只需要升级主题和“自动”再次工作。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1333721|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

<p>I had the same problem when I upgraded jquery UI to 1.8.1 without upgrading the corresponding theme. Only is needed to upgrade the theme too and "auto" works again.</p>


blocks|key|1333772|text|由于某些原因，我一直有这个IE7的全页宽问题，所以我做了这样的修改：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1333773|var+tag+=+$("<div></div>");
//IE7+workaround
var+w;
if+(navigator.appVersion.indexOf("MSIE+7.")+!=+-1)
++++w+=+400;
else
++++w+=+"auto";

tag.html('My+message').dialog({
++++width:+w,
++++maxWidth:+600,
++++...|code-block|syntax|javascript|1333774|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 some reason I kept having this full page width problem with IE7 so I made this hack:</p>

<pre><code>var tag = $("&lt;div&gt;&lt;/div&gt;");
//IE7 workaround
var w;
if (navigator.appVersion.indexOf("MSIE 7.") != -1)
    w = 400;
else
    w = "auto";

tag.html('My message').dialog({
    width: w,
    maxWidth: 600,
    ...
</code></pre>


blocks|key|1118781|text|我也有同样的问题，在你的.ui-dialog{}+css中有位置:绝对是不够的。我注意到在实际元素的直接样式上设置了position:+relative，所以.ui-dialog+css定义被覆盖了。在div上设置位置:绝对。我打算静态地创建一个对话框，但也不起作用。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1118782|最后，我更改了本地jQuery中的两个位置，以使其正常工作。|1118783|我将jQuery中的以下行改为：|1118784|elem.style.position+=+"absolute";|code-block|syntax|javascript|1118785|在https://github.com/jquery/jquery/blob/1.8.0/src/offset.js#L62|offset|length|1118786|此外，由于我的对话框设置为draggable，因此我还必须在jQuery-ui中将此行更改为：|1118787|this.element[0].style.position+=+'absolute';|1118788|在https://github.com/jquery/jquery-ui/blob/1-8-stable/ui/jquery.ui.draggable.js#L48|1118789|也许通过我拥有的风格更彻底地解决问题，但我认为我应该分享我是如何工作的。|1118790|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/jquery/jquery/blob/1.8.0/src/offset.js#L62|1|https://github.com/jquery/jquery-ui/blob/1-8-stable/ui/jquery.ui.draggable.js#L48^0|0|0|0|0|1|1P|0|0|0|0|1|29|1|0|0^^$0|@$1|2|3|4|5|6|7|16|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|17|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|18|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|19|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|6|7|1A|8|@]|9|@$M|1B|N|1C|1|1D]]|A|$]]|$1|O|3|P|5|6|7|1E|8|@]|9|@]|A|$]]|$1|Q|3|R|5|H|7|1F|8|@]|9|@]|A|$I|J]]|$1|S|3|T|5|6|7|1G|8|@]|9|@$M|1H|N|1I|1|1J]]|A|$]]|$1|U|3|V|5|6|7|1K|8|@]|9|@]|A|$]]|$1|W|3|-4|5|6|7|1L|8|@]|9|@]|A|$]]]|X|$Y|$5|Z|10|11|A|$12|13]]|14|$5|Z|10|11|A|$12|15]]]]

<p>I have the same problem and having position: absolute in your .ui-dialog{} css was not enough.  I noticed that position: relative was being set on the actual element's direct style, so the .ui-dialog css definition was getting overwritten.  Setting position: absolute on the div I was going to make a dialog statically also did not work.</p>

<p>In the end I changed two placed in my local jQuery to make this work.</p>

<p>I changed the following line in jQuery to be:</p>

<pre><code>elem.style.position = "absolute";
</code></pre>

<p>at <a href="https://github.com/jquery/jquery/blob/1.8.0/src/offset.js#L62" rel="nofollow">https://github.com/jquery/jquery/blob/1.8.0/src/offset.js#L62</a></p>

<p>Also, since my dialog was set to draggable, I had to change this line as well in jQuery-ui to be:</p>

<pre><code>this.element[0].style.position = 'absolute';
</code></pre>

<p>at <a href="https://github.com/jquery/jquery-ui/blob/1-8-stable/ui/jquery.ui.draggable.js#L48" rel="nofollow">https://github.com/jquery/jquery-ui/blob/1-8-stable/ui/jquery.ui.draggable.js#L48</a></p>

<p>Perhaps going through the style I have more thoroughly would fix things, but thought I'd share how I got this working.</p>


blocks|key|1118848|text|下面是我是如何做到的：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1118849|Responsive+jQuery+UI+Dialog+(+and+a+fix+for+maxWidth+bug+)|offset|length|1118850|修复maxWidth+&+width:+auto+bug。|1118851|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/16471890/responsive-jquery-ui-dialog-and-a-fix-for-maxwidth-bug^0|0|0|1M|0|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Q|8|@]|9|@$D|R|E|S|1|T]]|A|$]]|$1|F|3|G|5|6|7|U|8|@]|9|@]|A|$]]|$1|H|3|-4|5|6|7|V|8|@]|9|@]|A|$]]]|I|$J|$5|K|L|M|A|$N|O]]]]

<p>Here's how I did it:</p>

<p><a href="https://stackoverflow.com/questions/16471890/responsive-jquery-ui-dialog-and-a-fix-for-maxwidth-bug">Responsive jQuery UI Dialog ( and a fix for maxWidth bug )</a></p>

<p>Fixing the maxWidth &amp; width: auto bug.</p>


blocks|key|1118913|text|您可以通过指定最大宽度来避免100%25宽度问题。maxWidth选项似乎不起作用，因此请在对话框小部件上设置CSS+max-width属性。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1118914|如果还希望约束最大高度，请使用maxHeight选项。它将在必要时正确显示滚动条。|1118915|​|1118916|$(function()+{
++var+$dialog+=+$("#dialog");
++$dialog.dialog({
++++autoOpen:+false,
++++modal:+true,
++++width:+"auto"
++});
++/*
+++*+max-width+should+be+set+on+dialog+widget+because+maxWidth+option+has+known+issues
+++*+max-height+should+be+set+using+maxHeight+option
+++*/
++$dialog.dialog("widget").css("max-width",+$(window).width()+-+100);
++$dialog.dialog("option",+"maxHeight",+$(window).height()+-+100);
++$(".test-link").on("click",+function(e)+{
++++e.preventDefault();
++++$dialog.html($(this.hash).html());
++++//+if+you+change+the+content+of+dialog+after+it+is+created+then+reset+the+left
++++//+coordinate+otherwise+content+only+grows+up+to+the+right+edge+of+screen
++++$dialog.dialog("widget").css({+left:+0+});
++++$dialog.dialog("open");
++});
});|code-block|syntax|javascript|1118917|@import+url("https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.min.css");|1118918|<script+src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script+src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>

<div+id="dialog"></div>



<p>
++<a+href="#content-1"+class="test-link">Image+(Landscape)</a>
++<a+href="#content-2"+class="test-link">Image+(Portrait)</a>
++<a+href="#content-3"+class="test-link">Text+Content+(Small)</a>
++<a+href="#content-4"+class="test-link">Text+Content+(Large)</a>
</p>
<p>If+you+are+viewing+in+Stack+Snippets+>+Full+page+then+reload+the+snippet+so+that+window+height+is+recalculated+(Right+click+>+Reload+frame).</p>



<div+id="content-1"+style="display:+none;">
++<img+src="https://i.stack.imgur.com/5leq2.jpg"+width="450"+height="300">
</div>

<div+id="content-2"+style="display:+none;">
++<img+src="https://i.stack.imgur.com/9pVkn.jpg"+width="300"+height="400">
</div>

<div+id="content-3"+style="display:+none;">
++<p>Lorem+ipsum+dolor+sit+amet,+consectetur+adipiscing+elit.+Etiam+sodales+eu+urna+sit+amet+fermentum.+Morbi+ornare,+leo+ut+ornare+volutpat,+nibh+diam+mattis+elit,+eget+porta+sapien+quam+eu+mi.+Nullam+sollicitudin,+nibh+non+suscipit+commodo,+nisi+metus+bibendum+urna,+vitae+congue+nisl+risus+eu+tellus.+Praesent+diam+ligula,+hendrerit+eget+bibendum+quis,+convallis+eu+erat.+Aliquam+scelerisque+turpis+augue,+sit+amet+dictum+urna+hendrerit+id.+Vestibulum+luctus+dolor+quis+ex+sodales,+nec+aliquet+lacus+elementum.+Mauris+sollicitudin+dictum+augue+eget+posuere.+Suspendisse+diam+elit,+scelerisque+eu+quam+vel,+tempus+sodales+metus.+Morbi+et+vehicula+elit.+In+sit+amet+bibendum+mi.</p>
</div>

<div+id="content-4"+style="display:+none;">
++<p>Lorem+ipsum+dolor+sit+amet,+consectetur+adipiscing+elit.+Etiam+sodales+eu+urna+sit+amet+fermentum.+Morbi+ornare,+leo+ut+ornare+volutpat,+nibh+diam+mattis+elit,+eget+porta+sapien+quam+eu+mi.+Nullam+sollicitudin,+nibh+non+suscipit+commodo,+nisi+metus+bibendum+urna,+vitae+congue+nisl+risus+eu+tellus.+Praesent+diam+ligula,+hendrerit+eget+bibendum+quis,+convallis+eu+erat.+Aliquam+scelerisque+turpis+augue,+sit+amet+dictum+urna+hendrerit+id.+Vestibulum+luctus+dolor+quis+ex+sodales,+nec+aliquet+lacus+elementum.+Mauris+sollicitudin+dictum+augue+eget+posuere.+Suspendisse+diam+elit,+scelerisque+eu+quam+vel,+tempus+sodales+metus.+Morbi+et+vehicula+elit.+In+sit+amet+bibendum+mi.</p>
++<p>Aenean+eu+magna+tempor,+pellentesque+arcu+eget,+mattis+enim.+Cras+at+volutpat+mi.+Aenean+id+placerat+felis,+quis+imperdiet+nunc.+Aenean+a+iaculis+est,+quis+lacinia+nisl.+Sed+aliquet+sem+eget+justo+convallis+congue.+Quisque+rhoncus+nulla+sit+amet+cursus+maximus.+Phasellus+nec+auctor+urna.+Nam+mattis+felis+et+diam+finibus+consectetur.+Etiam+finibus+dignissim+vestibulum.+In+eu+urna+mattis+dui+pharetra+iaculis.+Nam+eleifend+odio+et+massa+imperdiet,+et+hendrerit+mauris+tempor.+Quisque+sapien+lorem,+dapibus+ut+ultricies+ut,+hendrerit+in+nulla.+Nunc+lobortis+mi+libero,+nec+tincidunt+lacus+pretium+at.+Aliquam+erat+volutpat.</p>
++<p>Fusce+eleifend+enim+nec+massa+porttitor+tempor+a+eget+neque.+Quisque+vel+augue+ac+urna+posuere+iaculis.+Morbi+pharetra+augue+ac+interdum+pulvinar.+Duis+vel+posuere+risus.+Interdum+et+malesuada+fames+ac+ante+ipsum+primis+in+faucibus.+Ut+vitae+lectus+non+nisl+iaculis+volutpat+nec+vitae+ante.+Maecenas+quis+condimentum+elit.+Sed+nisl+urna,+convallis+ut+pellentesque+sit+amet,+pellentesque+eget+quam.+Pellentesque+ornare+sapien+ac+scelerisque+pretium.+Pellentesque+metus+tortor,+accumsan+in+vehicula+iaculis,+efficitur+eget+nisi.+Donec+tincidunt,+felis+vel+viverra+convallis,+lectus+lectus+elementum+magna,+faucibus+viverra+risus+nulla+in+dolor.</p>
++<p>Duis+tristique+sapien+ut+commodo+laoreet.+In+vel+sapien+dui.+Vestibulum+non+bibendum+erat.+Etiam+iaculis+vehicula+accumsan.+Phasellus+finibus,+elit+et+molestie+luctus,+massa+arcu+tempor+nulla,+id+hendrerit+metus+mauris+non+mi.+Morbi+a+ultricies+magna.+Proin+condimentum+suscipit+urna+eu+maximus.+Mauris+condimentum+massa+ac+egestas+fermentum.+Praesent+faucibus+a+neque+a+molestie.+Integer+sed+diam+at+eros+accumsan+convallis.</p>
</div>|1118919|1118920|entityMap|0|LINK|mutability|MUTABLE|url|https://api.jqueryui.com/dialog/#option-maxWidth|1|https://api.jqueryui.com/dialog/#option-maxHeight^0|N|8|1L|9|N|8|0|0|F|9|F|9|1|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|13|8|@$9|14|A|15|B|C]|$9|16|A|17|B|C]]|D|@$9|18|A|19|1|1A]]|E|$]]|$1|F|3|G|5|6|7|1B|8|@$9|1C|A|1D|B|C]]|D|@$9|1E|A|1F|1|1G]]|E|$]]|$1|H|3|I|5|6|7|1H|8|@]|D|@]|E|$]]|$1|J|3|K|5|L|7|1I|8|@]|D|@]|E|$M|N]]|$1|O|3|P|5|L|7|1J|8|@]|D|@]|E|$M|N]]|$1|Q|3|R|5|L|7|1K|8|@]|D|@]|E|$M|N]]|$1|S|3|I|5|6|7|1L|8|@]|D|@]|E|$]]|$1|T|3|-4|5|6|7|1M|8|@]|D|@]|E|$]]]|U|$V|$5|W|X|Y|E|$Z|10]]|11|$5|W|X|Y|E|$Z|12]]]]

<p>You can avoid the 100% width issue by specifying a maximum width. The <a href="https://api.jqueryui.com/dialog/#option-maxWidth" rel="nofollow noreferrer"><code>maxWidth</code></a> option does not seem to work; so set the CSS <code>max-width</code> property on the dialog widget instead.</p>

<p>In case you also want to constrain the maximum height, use the <a href="https://api.jqueryui.com/dialog/#option-maxHeight" rel="nofollow noreferrer"><code>maxHeight</code></a> option. It will correctly show a scrollbar when necessary.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$(function() {
  var $dialog = $("#dialog");
  $dialog.dialog({
    autoOpen: false,
    modal: true,
    width: "auto"
  });
  /*
   * max-width should be set on dialog widget because maxWidth option has known issues
   * max-height should be set using maxHeight option
   */
  $dialog.dialog("widget").css("max-width", $(window).width() - 100);
  $dialog.dialog("option", "maxHeight", $(window).height() - 100);
  $(".test-link").on("click", function(e) {
    e.preventDefault();
    $dialog.html($(this.hash).html());
    // if you change the content of dialog after it is created then reset the left
    // coordinate otherwise content only grows up to the right edge of screen
    $dialog.dialog("widget").css({ left: 0 });
    $dialog.dialog("open");
  });
});</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>@import url("https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.min.css");</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://code.jquery.com/jquery-1.11.3.min.js"&gt;&lt;/script&gt;
&lt;script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"&gt;&lt;/script&gt;

&lt;div id="dialog"&gt;&lt;/div&gt;

&lt;!-- test links --&gt;

&lt;p&gt;
  &lt;a href="#content-1" class="test-link"&gt;Image (Landscape)&lt;/a&gt;
  &lt;a href="#content-2" class="test-link"&gt;Image (Portrait)&lt;/a&gt;
  &lt;a href="#content-3" class="test-link"&gt;Text Content (Small)&lt;/a&gt;
  &lt;a href="#content-4" class="test-link"&gt;Text Content (Large)&lt;/a&gt;
&lt;/p&gt;
&lt;p&gt;If you are viewing in Stack Snippets &gt; Full page then reload the snippet so that window height is recalculated (Right click &gt; Reload frame).&lt;/p&gt;

&lt;!-- sample content --&gt;

&lt;div id="content-1" style="display: none;"&gt;
  &lt;img src="https://i.stack.imgur.com/5leq2.jpg" width="450" height="300"&gt;
&lt;/div&gt;

&lt;div id="content-2" style="display: none;"&gt;
  &lt;img src="https://i.stack.imgur.com/9pVkn.jpg" width="300" height="400"&gt;
&lt;/div&gt;

&lt;div id="content-3" style="display: none;"&gt;
  &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sodales eu urna sit amet fermentum. Morbi ornare, leo ut ornare volutpat, nibh diam mattis elit, eget porta sapien quam eu mi. Nullam sollicitudin, nibh non suscipit commodo, nisi metus bibendum urna, vitae congue nisl risus eu tellus. Praesent diam ligula, hendrerit eget bibendum quis, convallis eu erat. Aliquam scelerisque turpis augue, sit amet dictum urna hendrerit id. Vestibulum luctus dolor quis ex sodales, nec aliquet lacus elementum. Mauris sollicitudin dictum augue eget posuere. Suspendisse diam elit, scelerisque eu quam vel, tempus sodales metus. Morbi et vehicula elit. In sit amet bibendum mi.&lt;/p&gt;
&lt;/div&gt;

&lt;div id="content-4" style="display: none;"&gt;
  &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sodales eu urna sit amet fermentum. Morbi ornare, leo ut ornare volutpat, nibh diam mattis elit, eget porta sapien quam eu mi. Nullam sollicitudin, nibh non suscipit commodo, nisi metus bibendum urna, vitae congue nisl risus eu tellus. Praesent diam ligula, hendrerit eget bibendum quis, convallis eu erat. Aliquam scelerisque turpis augue, sit amet dictum urna hendrerit id. Vestibulum luctus dolor quis ex sodales, nec aliquet lacus elementum. Mauris sollicitudin dictum augue eget posuere. Suspendisse diam elit, scelerisque eu quam vel, tempus sodales metus. Morbi et vehicula elit. In sit amet bibendum mi.&lt;/p&gt;
  &lt;p&gt;Aenean eu magna tempor, pellentesque arcu eget, mattis enim. Cras at volutpat mi. Aenean id placerat felis, quis imperdiet nunc. Aenean a iaculis est, quis lacinia nisl. Sed aliquet sem eget justo convallis congue. Quisque rhoncus nulla sit amet cursus maximus. Phasellus nec auctor urna. Nam mattis felis et diam finibus consectetur. Etiam finibus dignissim vestibulum. In eu urna mattis dui pharetra iaculis. Nam eleifend odio et massa imperdiet, et hendrerit mauris tempor. Quisque sapien lorem, dapibus ut ultricies ut, hendrerit in nulla. Nunc lobortis mi libero, nec tincidunt lacus pretium at. Aliquam erat volutpat.&lt;/p&gt;
  &lt;p&gt;Fusce eleifend enim nec massa porttitor tempor a eget neque. Quisque vel augue ac urna posuere iaculis. Morbi pharetra augue ac interdum pulvinar. Duis vel posuere risus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut vitae lectus non nisl iaculis volutpat nec vitae ante. Maecenas quis condimentum elit. Sed nisl urna, convallis ut pellentesque sit amet, pellentesque eget quam. Pellentesque ornare sapien ac scelerisque pretium. Pellentesque metus tortor, accumsan in vehicula iaculis, efficitur eget nisi. Donec tincidunt, felis vel viverra convallis, lectus lectus elementum magna, faucibus viverra risus nulla in dolor.&lt;/p&gt;
  &lt;p&gt;Duis tristique sapien ut commodo laoreet. In vel sapien dui. Vestibulum non bibendum erat. Etiam iaculis vehicula accumsan. Phasellus finibus, elit et molestie luctus, massa arcu tempor nulla, id hendrerit metus mauris non mi. Morbi a ultricies magna. Proin condimentum suscipit urna eu maximus. Mauris condimentum massa ac egestas fermentum. Praesent faucibus a neque a molestie. Integer sed diam at eros accumsan convallis.&lt;/p&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>


blocks|key|1118958|text|我也遇到过类似的问题。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1118959|将width设置为"auto"对我来说很好，但当对话框包含大量文本时，它会忽略maxWidth设置，使其覆盖整个页面的宽度。|offset|length|style|CODE|1118960|不过，在create上设置maxWidth可以很好地工作：|1118961|$(+".selector"+).dialog({
++width:+"auto",
++//+maxWidth:+660,+//+This+won't+work
++create:+function(+event,+ui+)+{
++++//+Set+maxWidth
++++$(this).css("maxWidth",+"660px");
++}
});|code-block|syntax|javascript|1118962|entityMap^0|0|1|5|9|6|13|8|0|4|6|D|8|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@$D|S|E|T|F|G]|$D|U|E|V|F|G]|$D|W|E|X|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|Y|8|@$D|Z|E|10|F|G]|$D|11|E|12|F|G]]|9|@]|A|$]]|$1|J|3|K|5|L|7|13|8|@]|9|@]|A|$M|N]]|$1|O|3|-4|5|6|7|14|8|@]|9|@]|A|$]]]|P|$]]

<p>I had a similar problem.</p>

<p>Setting <code>width</code> to <code>"auto"</code> worked fine for me but when the dialog contained a lot of text it made it span the full width of the page, ignoring the <code>maxWidth</code> setting.</p>

<p>Setting <code>maxWidth</code> on <code>create</code> works fine though:</p>

<pre><code>$( ".selector" ).dialog({
  width: "auto",
  // maxWidth: 660, // This won't work
  create: function( event, ui ) {
    // Set maxWidth
    $(this).css("maxWidth", "660px");
  }
});
</code></pre>


blocks|key|1119017|text|如果您需要在IE7中使用它，则不能使用undocumented,+buggy,+and+unsupported+{'width':'auto'}选项。相反，请将以下内容添加到.dialog()中|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1119018|'open':+function(){+$(this).dialog('option',+'width',+this.scrollWidth)+}|code-block|syntax|javascript|1119019|.scrollWidth是否包含右侧填充取决于浏览器(火狐和Chrome不同)，所以你可以给.scrollWidth添加一个主观的“足够好”的像素数，或者用你自己的宽度计算函数来代替它。|1119020|您可能希望在.dialog()选项中包含width:+0，因为此方法永远不会减小宽度，而只会增加宽度。|1119021|经测试可在IE7、IE8、IE9、IE10、IE11、Firefox30、Chrome35和Opera22上运行。|1119022|entityMap|0|LINK|mutability|MUTABLE|url|http://bugs.jqueryui.com/ticket/4437#comment:9^0|1K|G|2F|9|J|10|0|0|0|0|C|1A|C|0|6|9|K|8|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@$9|Z|A|10|B|C]|$9|11|A|12|B|C]]|D|@$9|13|A|14|1|15]]|E|$]]|$1|F|3|G|5|H|7|16|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|17|8|@$9|18|A|19|B|C]|$9|1A|A|1B|B|C]]|D|@]|E|$]]|$1|M|3|N|5|6|7|1C|8|@$9|1D|A|1E|B|C]|$9|1F|A|1G|B|C]]|D|@]|E|$]]|$1|O|3|P|5|6|7|1H|8|@]|D|@]|E|$]]|$1|Q|3|-4|5|6|7|1I|8|@]|D|@]|E|$]]]|R|$S|$5|T|U|V|E|$W|X]]]]

<p>If you need it to work in IE7, you can't use the <a href="http://bugs.jqueryui.com/ticket/4437#comment:9" rel="nofollow">undocumented, buggy, and unsupported</a> <code>{'width':'auto'}</code> option. Instead, add the following to your <code>.dialog()</code>:</p>

<pre><code>'open': function(){ $(this).dialog('option', 'width', this.scrollWidth) }
</code></pre>

<p>Whether <code>.scrollWidth</code> includes the right-side padding depends on the browser (Firefox differs from Chrome), so you can either add a subjective "good enough" number of pixels to <code>.scrollWidth</code>, or replace it with your own width-calculation function.</p>

<p>You might want to include <code>width: 0</code> among your <code>.dialog()</code> options, since this method will never decrease the width, only increase it.</p>

<p>Tested to work in IE7, IE8, IE9, IE10, IE11, Firefox 30, Chrome 35, and Opera 22.</p>


blocks|key|1334112|text|我也遇到过这个问题。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1334113|我用下面的方法让它工作：|1334114|.ui-dialog{
++++display:inline-block;
}|code-block|syntax|javascript|1334115|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>I had this problem as well.</p>

<p>I got it working with this:</p>

<pre><code>.ui-dialog{
    display:inline-block;
}
</code></pre>


blocks|key|1119060|text|你所需要做的就是添加：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1119061|width:+'65%25',|code-block|syntax|javascript|1119062|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>All you need to do is just to add:</p>

<pre><code>width: '65%',
</code></pre>


blocks|key|1334181|text|编辑下面的内容：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1334182|​|1334183|$("#message").dialog({
	autoOpen:false,
	modal:true,
	resizable:+false,
	width:'80%25',|code-block|syntax|javascript|1334184|1334185|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|M|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|N|8|@]|9|@]|A|$G|H]]|$1|I|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|K|$]]

<p>edit this bellow:</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>$("#message").dialog({
	autoOpen:false,
	modal:true,
	resizable: false,
	width:'80%',</code></pre>
</div>
</div>
</p>


blocks|key|1334261|text|补充弗拉基米尔·科尔尼亚的答案。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1334262|我想要一种在屏幕太小的情况下设置宽度的方法，然后设置一个动态宽度。不是真正的“响应式”bit在大多数情况下都工作得很好。|1334263|,+'open':+function(){
+++var+resposive_width+=+($(+window+).width()+>+640)+?+640+:+($(+window+).width()+-+20);
+++$(this).dialog('option',+'width',+resposive_width)
+}|code-block|syntax|javascript|1334264|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>Adding to Vladimir Kornea's answer.</p>
<p>I wanted a way to set the width unless the screen was too small, then a dynamic width. Not truly &quot;responsive&quot; bit works well for most cases.</p>
<pre><code>, 'open': function(){
   var resposive_width = ($( window ).width() &gt; 640) ? 640 : ($( window ).width() - 20);
   $(this).dialog('option', 'width', resposive_width)
 }
</code></pre>


<p>I'm having a lot of trouble finding specific information and examples on this.   I've got a number of jQuery UI dialogs in my application attached to divs that are loaded with .ajax() calls.  They all use the same setup call:</p>

<pre><code> $(".mydialog").dialog({
        autoOpen: false,
        resizable: false,
        modal: true
 });
</code></pre>

<p>I just want to have the dialog resize to the width of the content that gets loaded.  Right now, the width just stays at 300px (the default) and I get a horizontal scrollbar.</p>

<p>As far as I can tell, "autoResize" is no longer an option for dialogs, and nothing happens when I specify it.</p>

<p>I'm trying to not write a separate function for each dialog, so <code>.dialog("option", "width", "500")</code> is not really an option, as each dialog is going to have a different width.  </p>

<p>Specifying <code>width: 'auto'</code> for the dialog options just makes the dialogs take up 100% of the width of the browser window.</p>

<p>What are my options?  I'm using jQuery 1.4.1 with jQuery UI 1.8rc1. It seems like this should be something that is really easy.</p>

<p>EDIT: I've implemented a kludgy workaround for this, but I'm still looking for a better solution.</p>


Automatically resize jQuery UI dialog to the width of the content loaded by ajax

jQuery

我在寻找这方面的具体信息和例子时遇到了很多麻烦。我的应用程序中有许多divs对话框，这些对话框通过.ajax()调用加载。它们都使用相同的设置调用： $(".mydialog").dialog({        autoOpen: false,        resizable: false,        modal...

问自动调整jQuery UI对话框的大小以适应ajax加载的内容的宽度
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问自动调整jQuery UI对话框的大小以适应ajax加载的内容的宽度EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问自动调整jQuery UI对话框的大小以适应ajax加载的内容的宽度
EN