由于许多网站利用jQuery UI的，还有一些必须克服因为jQuery UI不支持响应式设计，并有当一个长期的错误一些重大缺陷maxWidth与配合使用width:'auto' 。
因此，问题仍然存在，如何让jQuery用户界面对话框响应？
Answer 1:
下面是我如何实现一个负责任的jQuery UI的对话框。
要做到这一点，我添加了一个新的选择的配置- 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％）
Answer 2:
设置maxWidth上create工作正常：
$( ".selector" ).dialog({
width: "auto",
// maxWidth: 660, // This won't work
create: function( event, ui ) {
// Set maxWidth
$(this).css("maxWidth", "660px");
}
});
Answer 3:
无需jQuery的或Javascript。 CSS解决一切问题这一点。
这是我的一个响应jquery的对话框项目解决方案。 默认宽度和高度，然后最大宽度和高度作为浏览器收缩小。 然后我们有Flexbox将导致内容跨越可用高度。
小提琴： 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;
}
小提琴： http://jsfiddle.net/iausallc/y7ja52dq/6/
Answer 4:
我收集这些代码从几个来源，我把它们放在一起。 这是我想出了一个响应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>
Answer 5:
我已成功地与老一个负责任的对话
<!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"> 像这样
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');
调整窗口的jsfiddle结果，然后单击“运行”。
Answer 6:
我不知道，我的简单的解决方案解决了这个问题的问题，但它为我所试图做的：
$('#dialog').dialog(
{
autoOpen: true,
width: Math.min(400, $(window).width() * .8),
modal: true,
draggable: true,
resizable: false,
});
也就是说，该对话框有400像素宽打开，除非该窗口的宽度需要较小的宽度。
在这个意义上没有反应，如果宽度变窄对话框缩小，但响应的意义上，在特定设备上，该对话框不会太宽。
Answer 7:
如果您的网站被限制到最大尺寸，然后在下面的方法会奏效。 附加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
});
Answer 8:
$("#content").dialog({
width: 'auto',
create: function (event, ui) {
// Set max-width
$(this).parent().css("maxWidth", "600px");
}
});
这为我工作
Answer 9:
我已经成功地做到这样的回应对话。 由于在使用百分maxWidth看起来怪异。
var wWidth = $(window).width();
var dWidth = wWidth * 0.8;
$('.selector').dialog({
height: 'auto',
width: 'auto',
create: function(){
$(this).css('maxWidth', dWidth);
}
});
Answer 10:
谢谢你的帖子！ 这为我节约了大量时间。
我也想补充，虽然，我得到一些时髦的定位时，对某些尺寸的屏幕第一次打开对话框。 如果您遇到这样的错误，请尝试做这样的事情：
if (wWidth < dialog.options.maxWidth + 50) {
// keep dialog from filling entire screen
$this.css("max-width", "90%");
// ADDED
$this.css("left", "5%");
} else {
// fix maxWidth bug
$this.css("max-width", dialog.options.maxWidth);
// ADDED
var mLeft = (wWidth - dialog.options.maxWidth) / 2;
$this.css("left", mLeft + "px");
}
希望这样可以节省别人头疼=）
Answer 11:
我刚刚发现这个问题的解决方案。
我贴我的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;
}
Answer 12:
谢谢你，这使得响应，但我仍然有与对话是偏心B / C我的内容（Django的表单模板）被加载对话框打开后一个问题。 因此，而不是$( "#my-modal" ).load(myurl).dialog("open" ); 我叫$( "#my-modal" ).dialog("open" ); 然后在对话框中，我添加选项'open'和呼叫负载，那么你的fluidDialog()函数：
在对话框选项（模态，流体，height..etc）：
open: function () {
// call LOAD after open
$("#edit-profile-modal").load(urlvar, function() {
// call fluid dialog AFTER load
fluidDialog();
});
Answer 13:
接受的解决方案是相当马车和过度设计海事组织。 我想出了dialogResize这是我的目的，更清洁，更简单。
实现像这样：
$("#dialog").dialogResize({
width: 600,
height: 400,
autoOpen: true,
modal: true
});
演示
文章来源: Responsive jQuery UI Dialog ( and a fix for maxWidth bug )
