由于jQuery UI不支持响应式设计，而且在使用maxWidth与width:'auto'时存在一个长期存在的错误，因此许多网站利用jQuery UI时必须克服一些重大缺陷。
那么问题就在于，如何使jQuery UI对话框具有响应式设计？
响应式jQuery UI对话框（以及maxWidth bug的修复）
45
- Jason
1
这里有一个相关的解决方案，帮助我获得了一个响应式对话框 - http://stackoverflow.com/a/9236702/1298685。 - Ian Campbell
15个回答
68
以下是我如何实现响应式jQuery UI对话框。
为此，我向配置中添加了一个新选项 -
然后，我捕获调整大小和对话框打开事件，动态更改对话框的最大宽度并重新定位对话框。
您可以在这里查看其效果：http://codepen.io/jasonday/pen/amlqz 请审核并发布任何编辑或改进。
为此，我向配置中添加了一个新选项 -
fluid: true，该选项表示使对话框具有响应性。然后，我捕获调整大小和对话框打开事件，动态更改对话框的最大宽度并重新定位对话框。
您可以在这里查看其效果：http://codepen.io/jasonday/pen/amlqz 请审核并发布任何编辑或改进。
// Demo: http://codepen.io/jasonday/pen/amlqz
// movemaine@gmail.com
$("#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);
}
});
}
编辑
更新的方法是： https://github.com/jasonday/jQuery-UI-Dialog-extended
上述存储库还包括以下选项：
- 点击对话框外部关闭
- 隐藏标题栏
- 隐藏关闭按钮
- 响应式设计（解决上述问题）
- 缩放宽度和高度以用于响应式设计（例如：窗口宽度的80%）
- Jason
15
1非常感谢您！width auto，maxwidth bug一直是一个巨大的困扰！ - DroidOS
值得一提的是，fluidDialog也可以从dialog open中调用：以确保在打开对话框后立即遵守width:'auto' + maxWidth:www - 而无需进行任何窗口调整。 - DroidOS
else 部分可以很容易地修改以强制执行 minWidth。
$this.css("min-width",dialog.options.minWidth + 'px') - DroidOS2@SarahJames：可能是因为你需要更改这一行代码：
var dialog = $this.find(".ui-dialog-content").data("ui-dialog")，改为var dialog = $this.find(".ui-dialog-content").data("dialog")。使用.data('dialog')代替.data('ui-dialog')。 - luqita1@luqita - 这取决于您使用的jQuery UI版本。他们通过发布更改了对话框的数据选项。 - Jason
显示剩余10条评论
43
在创建时设置 maxWidth 是有效的：
$( ".selector" ).dialog({
width: "auto",
// maxWidth: 660, // This won't work
create: function( event, ui ) {
// Set maxWidth
$(this).css("maxWidth", "660px");
}
});
- tsi
3
完美运行。谢谢。 - Joel
2我必须执行
$(this).parent().css('maxWidth', '660px');，但除此之外，完美，谢谢。 - Blair Connolly在我的情况下，为了确保我的对话框不超出窄屏幕的宽度，并且实际上是稍微嵌入的，我使用了
$(this).parent().css('maxWidth', 'calc(100% - 20px)');。 - undefined11
不需要使用jQuery或Javascript。CSS可以解决这一切。
这是我为响应式jquery对话框的项目解决方案。默认宽度和高度，然后最大宽度和高度适应浏览器缩小的大小。然后，我们使用Flexbox来使内容跨越可用高度。
Fiddle: http://jsfiddle.net/iausallc/y7ja52dq/1/
编辑
更新居中技术以支持调整大小和拖动
.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;
}
- iautomation
4
我尝试了这种方法。它成功地使对话框响应，但阻止了可拖动和可调整大小的功能。 - Jeffrey Simon
@JeffreySimon 感谢您指出这一点。请查看编辑。 - iautomation
我尝试了修改后的版本。之前的版本（存在问题）会随着浏览器窗口大小的改变而动态调整大小。但是只有在更改窗口大小然后重新加载时才会响应。有人可以提出一个很好的理由，认为这已经足够了，因为用户不会更改设备的大小；只有开发人员通过动态更改浏览器宽度进行测试。但是，如果这是目标，我的解决方案更简单，只需使用width：Math.min(400，$(window).width（）* .8）。此时，我倾向于选择上面给出的动态解决方案（fluidDialog）。 - Jeffrey Simon
我非常喜欢这个解决方案，因为它只需要一小块 CSS。它对我来说完美地起作用了，虽然我也喜欢下一个解决方案，但这是我尝试的第一个解决方案，一旦它起作用了，我就被吸引了。 - DaveS
8
我从几个来源收集了这些代码，然后将它们组合在一起。这就是我设计出一个响应式的 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>
- gracia16
3
我不确定我的简单解决方案是否能解决这个问题，但对于我试图做的事情而言它是有效的:
$('#dialog').dialog(
{
autoOpen: true,
width: Math.min(400, $(window).width() * .8),
modal: true,
draggable: true,
resizable: false,
});
也就是说，对话框的宽度为400像素，除非窗口的宽度要求更小的宽度。
这里的“不可响应性”指的不是指如果宽度变窄，对话框就会收缩，而是指在特定设备上，对话框不会太宽。
- Jeffrey Simon
1
完美。简短而精练，虽然不太动态，但我并不需要那个。谢谢！ - Eric Sassaman
3
$("#content").dialog({
width: 'auto',
create: function (event, ui) {
// Set max-width
$(this).parent().css("maxWidth", "600px");
}
});
这对我很有用
- Himalaya Garg
1
这是最简单、最响应的本地解决方案。谢谢。 - Hayden Thring
3
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 JSFiddle result and click "Run".
- Adrian P.
1
非常类似于我的Ui Dialog扩展方法。https://github.com/jasonday/jQuery-UI-Dialog-extended - Jason
2
我刚刚找到了解决这个问题的方法。
我粘贴了我的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;
}
- Fang Fang
2
如果您的网站受到最大尺寸限制，那么以下方法将有效。请将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
});
- kiranutt
1
我尝试了这种方法。它比自动化的响应更流畅。然而，可拖动和可调整大小只在垂直方向上起作用。水平拖动不起作用，水平调整大小只会保持对话框的尺寸不变，但只会调整内容。 - Jeffrey Simon
1
我已经成功制作了响应式对话框，如下所示。因为在
maxWidth上使用百分比看起来很奇怪。var wWidth = $(window).width();
var dWidth = wWidth * 0.8;
$('.selector').dialog({
height: 'auto',
width: 'auto',
create: function(){
$(this).css('maxWidth', dWidth);
}
});
- everis
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接