响应式 jQuery UI 对话框（以及对 maxWidth 错误的修复）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16471890/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Responsive jQuery UI Dialog ( and a fix for maxWidth bug )
提问by Jason
With many sites leveraging jQuery UI, there are some major shortcomings that have to be overcome because jQuery UI does not support responsive design and there's a longstanding bug when maxWidthis used in conjunction with width:'auto'.
由于许多站点都使用 jQuery UI，因此存在一些必须克服的主要缺点，因为 jQuery UI 不支持响应式设计，并且当maxWidth与width:'auto'.
So the question remains, how to make jQuery UI Dialog responsive?
所以问题仍然存在，如何使 jQuery UI Dialog 响应？
回答by Jason
Below is how I achieved a responsive jQuery UI Dialog.
下面是我如何实现响应式 jQuery UI 对话框。
To do this, I added a new option to the config - fluid: true, which says to make the dialog responsive.
为此，我在 config - 中添加了一个新选项fluid: true，它表示使对话框具有响应性。
I then catch the resize and dialog open events, to change the max-width of the dialog on the fly, and reposition the dialog.
然后我捕捉调整大小和对话框打开事件，动态更改对话框的最大宽度，并重新定位对话框。
You can see it in action here: http://codepen.io/jasonday/pen/amlqz
你可以在这里看到它的实际效果：http: //codepen.io/jasonday/pen/amlqz
Please review and post any edits or improvements.
请查看并发布任何编辑或改进。
// Demo: http://codepen.io/jasonday/pen/amlqz
// [email protected]
$("#content").dialog({
width: 'auto', // overcomes width:'auto' and maxWidth bug
maxWidth: 600,
height: 'auto',
modal: true,
fluid: true, //new option
resizable: false
});
// on window resize run function
$(window).resize(function () {
fluidDialog();
});
// catch dialog if opened within a viewport smaller than the dialog width
$(document).on("dialogopen", ".ui-dialog", function (event, ui) {
fluidDialog();
});
function fluidDialog() {
var $visible = $(".ui-dialog:visible");
// each open dialog
$visible.each(function () {
var $this = $(this);
var dialog = $this.find(".ui-dialog-content").data("ui-dialog");
// if fluid option == true
if (dialog.options.fluid) {
var wWidth = $(window).width();
// check window width against dialog width
if (wWidth < (parseInt(dialog.options.maxWidth) + 50)) {
// keep dialog from filling entire screen
$this.css("max-width", "90%");
} else {
// fix maxWidth bug
$this.css("max-width", dialog.options.maxWidth + "px");
}
//reposition dialog
dialog.option("position", dialog.options.position);
}
});
}
EDIT
编辑
Updated approach: https://github.com/jasonday/jQuery-UI-Dialog-extended
更新方法：https: //github.com/jasonday/jQuery-UI-Dialog-extended
The repository above also includes options for:
上面的存储库还包括以下选项：
- Click outside of dialog to close
- Hide title bar
- hide close button
- responsive (to address above)
- scale width & height for responsive (ex: 80% of window width)
- 单击对话框外以关闭
- 隐藏标题栏
- 隐藏关闭按钮
- 响应式（针对上述地址）
- 响应式缩放宽度和高度（例如：窗口宽度的 80%）
回答by tsi
Setting maxWidthon createworks fine:
设置maxWidth上create正常工作：
$( ".selector" ).dialog({
width: "auto",
// maxWidth: 660, // This won't work
create: function( event, ui ) {
// Set maxWidth
$(this).css("maxWidth", "660px");
}
});
回答by iautomation
No need for jQuery or Javascript. CSS solves everything for this.
不需要 jQuery 或 Javascript。CSS为此解决了一切。
This is my project solution for a responsive jquery dialog box. Default width and height, then max width and height for as small as the browser shrinks. Then we have flexbox to cause the contents to span the available height.
这是我的响应式 jquery 对话框的项目解决方案。默认宽度和高度，然后是浏览器缩小时的最大宽度和高度。然后我们有 flexbox 使内容跨越可用高度。
Fiddle: http://jsfiddle.net/iausallc/y7ja52dq/1/
小提琴：http: //jsfiddle.net/iausallc/y7ja52dq/1/
EDIT
编辑
Updated centering technique to support resizing and dragging
更新了居中技术以支持调整大小和拖动
.ui-dialog {
z-index:1000000000;
top: 0; left: 0;
margin: auto;
position: fixed;
max-width: 100%;
max-height: 100%;
display: flex;
flex-direction: column;
align-items: stretch;
}
.ui-dialog .ui-dialog-content {
flex: 1;
}
回答by gracia16
I gathered these codes from several sources and I put them together. This is how I came up with a responsive jQuery UI Dialog. Hope this helps..
我从几个来源收集了这些代码并将它们放在一起。这就是我想出一个响应式 jQuery UI 对话框的方式。希望这可以帮助..
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>jQuery UI Dialog - Modal message</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
$(document).ready(function() {
$("#dialog-message").dialog({
modal: true,
height: 'auto',
width: $(window).width() > 600 ? 600 : 'auto', //sets the initial size of the dialog box
fluid: true,
resizable: false,
autoOpen: true,
buttons: {
Ok: function() {
$(this).dialog("close");
}
}
});
$(".ui-dialog-titlebar-close").hide();
});
$(window).resize(function() {
$("#dialog-message").dialog("option", "position", "center"); //places the dialog box at the center
$("#dialog-message").dialog({
width: $(window).width() > 600 ? 600 : 'auto', //resizes the dialog box as the window is resized
});
});
</script>
</head>
<body>
<div id="dialog-message" title="Responsive jQuery UI Dialog">
<p style="font-size:12px"><b>Lorem Ipsum</b></p>
<p style="font-size:12px">Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Quisque sagittis eu turpis at luctus. Quisque
consectetur ac ex nec volutpat. Vivamus est lacus, mollis vitae urna
vitae, semper aliquam ante. In augue arcu, facilisis ac ultricies ut,
sollicitudin vitae tortor.
</p>
</div>
</body>
</html>
回答by Adrian P.
I have managed to to a responsive dialog with old
我已经设法与旧的响应对话
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
like this
像这样
var dWidth = $(window).width() * 0.9;
var dHeight = $(window).height() * 0.9;
$('#dialogMap').dialog({
autoOpen: false,
resizable: false,
draggable: false,
closeOnEscape: true,
stack: true,
zIndex: 10000,
width: dWidth,
height: dHeight,
modal: true,
open:function () {
}
});
$('#dialogMap').dialog('open');
Resize the window on JSFiddleresult and click "Run".
在JSFiddle结果上调整窗口大小，然后单击“运行”。
回答by Jeffrey Simon
I am not sure that my simple solution solves the problem of this question, but it works for what I am trying to do:
我不确定我的简单解决方案是否解决了这个问题，但它适用于我想要做的事情：
$('#dialog').dialog(
{
autoOpen: true,
width: Math.min(400, $(window).width() * .8),
modal: true,
draggable: true,
resizable: false,
});
That is, the dialog opens with a 400px width, unless the width of the window requires a smaller width.
也就是说，对话框以 400px 的宽度打开，除非窗口的宽度需要更小的宽度。
Not responsive in the sense that if the width is narrowed the dialog shrinks, but responsive in the sense that on a specific device, the dialog will not be too wide.
如果宽度变窄，对话框会缩小，那么不响应，但在特定设备上，对话框不会太宽。
回答by Himalaya Garg
$("#content").dialog({
width: 'auto',
create: function (event, ui) {
// Set max-width
$(this).parent().css("maxWidth", "600px");
}
});
This Worked for me
这对我有用
回答by kiranutt
If your site is restricted to a max size, then below approach will work. Attach a css style to your dialog.
如果您的网站被限制为最大尺寸，那么下面的方法将起作用。将 css 样式附加到您的对话框。
.alert{
margin: 0 auto;
max-width: 840px;
min-width: 250px;
width: 80% !important;
left: 0 !important;
right: 0 !important;
}
$('#divDialog').dialog({
autoOpen: false,
draggable: true,
resizable: true,
dialogClass: "alert",
modal: true
});
回答by everis
I have managed to do responsive dialog like this. Because use percent on maxWidthlooked weird.
我已经设法做这样的响应式对话框。因为使用百分比maxWidth看起来很奇怪。
var wWidth = $(window).width();
var dWidth = wWidth * 0.8;
$('.selector').dialog({
height: 'auto',
width: 'auto',
create: function(){
$(this).css('maxWidth', dWidth);
}
});
回答by Fang Fang
I just found a solution for this issue.
我刚刚找到了解决此问题的方法。
I pasted my css style, hope this can help someone
我粘贴了我的 css 样式，希望这可以帮助某人
.ui-dialog{
position: fixed;
left: 0 !important;
right: 0 !important;
padding: rem-calc(15);
border: 1px solid #d3dbe2;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
max-width: rem-calc(620);
top: rem-calc(100) !important;
margin: 0 auto;
width: calc(100% - 20px) !important;
}
