blocks|key|552101|text|创建一个具有固定位置的css类：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|552102|.fixed-dialog{
++position:+fixed;
++top:+50px;
++left:+50px;
}|code-block|syntax|javascript|552103|然后在创建对话框时将类附加为选项的一部分：|552104|$(+".selector"+).dialog({+dialogClass:+'fixed-dialog'+});|552105|下面是一个实用的示例:+jsfiddle这个示例并不太华丽，因为我无法让http://jsfiddle.net/3hrSv/设置对话框的样式。|offset|length|552106|如果你想让对话框居中显示在屏幕的中间，尝试按照http://css-tricks.com/320-quick-css-trick-how-to-center-an-object-exactly-in-the-center/的建议在你的css中设置top:50%25;+left:50%25;。|style|CODE|552107|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/3hrSv/|1|http://css-tricks.com/320-quick-css-trick-how-to-center-an-object-exactly-in-the-center/^0|0|0|0|0|10|Q|0|0|3F|I|N|2G|1|0^^$0|@$1|2|3|4|5|6|7|12|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|13|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|14|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|15|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|16|8|@]|9|@$M|17|N|18|1|19]]|A|$]]|$1|O|3|P|5|6|7|1A|8|@$M|1B|N|1C|Q|R]]|9|@$M|1D|N|1E|1|1F]]|A|$]]|$1|S|3|-4|5|6|7|1G|8|@]|9|@]|A|$]]]|T|$U|$5|V|W|X|A|$Y|Z]]|10|$5|V|W|X|A|$Y|11]]]]

Create a css class with the fixed position:

<pre><code>.fixed-dialog{
 position: fixed;
 top: 50px;
 left: 50px;
}
</code></pre>

Then append the class as part of the options when you create the dialog:

<pre><code>$( ".selector" ).dialog({ dialogClass: 'fixed-dialog' });
</code></pre>

Here is a working Example: <a href="http://jsfiddle.net/3hrSv/" rel="noreferrer">http://jsfiddle.net/3hrSv/</a>
The example is not too flashy because I couldn't get jsfiddle to style the dialog.

If you would like to center the dialog in the middle of the screen try setting <code>top:50%; left:50%;</code> in your css as suggested by: <a href="http://css-tricks.com/320-quick-css-trick-how-to-center-an-object-exactly-in-the-center/" rel="noreferrer">http://css-tricks.com/320-quick-css-trick-how-to-center-an-object-exactly-in-the-center/</a>

blocks|key|768837|text|如果希望所有对话框都具有此行为，可以修改jquery.ui.dialog.css文件。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|768838|更改：|768839|.ui-dialog+{+position:+absolute;+padding:+.2em;+width:+300px;+overflow:+hidden;+}|code-block|syntax|javascript|768840|至：|768841|.ui-dialog+{+position:+fixed;+padding:+.2em;+width:+300px;+overflow:+hidden;+}|768842|或者，如果您想保留原始文件，只需添加以下行：|768843|div.ui-dialog+{position:fixed;}+|768844|添加到页面引用的某个css文件，或页面上的样式块。|768845|entityMap^0|K|K|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@$9|Z|A|10|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|11|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|12|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|13|8|@]|D|@]|E|$]]|$1|O|3|P|5|J|7|14|8|@]|D|@]|E|$K|L]]|$1|Q|3|R|5|6|7|15|8|@]|D|@]|E|$]]|$1|S|3|T|5|J|7|16|8|@]|D|@]|E|$K|L]]|$1|U|3|V|5|6|7|17|8|@]|D|@]|E|$]]|$1|W|3|-4|5|6|7|18|8|@]|D|@]|E|$]]]|X|$]]

If you want all of your dialogs to have this behavior, you can modify your <code>jquery.ui.dialog.css</code> file. 

Change:

<pre><code>.ui-dialog { position: absolute; padding: .2em; width: 300px; overflow: hidden; }
</code></pre>

To:

<pre><code>.ui-dialog { position: fixed; padding: .2em; width: 300px; overflow: hidden; }
</code></pre>

or, if you want to preserve the original file, just add the line:

<pre><code>div.ui-dialog {position:fixed;} 
</code></pre>

to one of your css files referenced by the page, or the style block on the page.

blocks|key|552228|text|这是一个老问题，但我发现James的回答(将JQuery的div.ui-dialog修改为position:fixed)提供了这个问题的一半答案。另一半是:确保父元素的高度是100%25。在我的例子中，body是我的对话框的父对象，所以我有下面这行：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|552229|<body+style='height:+100%25;+min-height:+100%25;'>|code-block|syntax|javascript|552230|再加上James的建议，将其添加到我的CSS文件中：|552231|div.ui-dialog+{position:fixed;}|552232|..。我终于让我的对话框出现在浏览器窗口的中心，并在我滚动的时候停留在那里。希望这能帮助未来的谷歌人谁可能通过这里。|552233|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

This is an old question, but I found that James' answer (to revise JQuery's div.ui-dialog to position:fixed) provided one-half of the answer to this question. The other half is this: Be sure that the height of the parent element is 100%. In my case, the body is the parent to my dialogs, so I have this line:

<pre><code>&lt;body style='height: 100%; min-height: 100%;'&gt;
</code></pre>

That, plus James' suggestion to add this to my CSS file:

<pre><code>div.ui-dialog {position:fixed;}
</code></pre>

... finally got my dialogs to appear at the center of the browser window and stay there while I scroll. Hope this helps future googlers who may pass through here.

blocks|key|552249|text|或者在创建CSS时应用它：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|552250|++++++++$("#Modal").dialog({
++++++++autoOpen:+false,
++++++++width:+500,
++++++++height:+'auto',
++++++++position:+[50,+150],
++++++++create:+function+(event)+{
++++++++++++$(event.target).parent().css({+'position':+'fixed',+"left":+50,+"top":+150+});
++++++++++}
++++++++});|code-block|syntax|javascript|552251|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|$]]

Or to apply the CSS when you create it:

<pre><code> $("#Modal").dialog({
 autoOpen: false,
 width: 500,
 height: 'auto',
 position: [50, 150],
 create: function (event) {
 $(event.target).parent().css({ 'position': 'fixed', "left": 50, "top": 150 });
 }
 });
</code></pre>

Is there any possibility to fix the modal window for jQuery UI, so when the user is using the scroller on the right side, the side behind scrolls, but the modal window is staying fix?

jQuery UI Modal Dialog should be fixed on scroll

jQuery

有没有可能修复jQuery UI的模式窗口，因此当用户使用右侧的滚动条时，后面的滚动条会滚动，但模式窗口保持不变？

问jQuery UI模式对话框应固定在滚动上
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jQuery UI模式对话框应固定在滚动上EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jQuery UI模式对话框应固定在滚动上
EN