许多网站都使用 jQuery UI，但有一些重大缺点需要克服，因为 jQuery UI 不支持响应式设计，并且当
maxWidthwidth:'auto'所以问题仍然是，如何使 jQuery UI 对话框响应？
下面是我如何实现响应式 jQuery UI 对话框。
为此，我在配置中添加了一个新选项 -
fluid: true然后，我捕获调整大小和对话框打开事件，以动态更改对话框的最大宽度，并重新定位对话框。
您可以在这里看到它的实际效果：http://codepen.io/jasonday/pen/amlqz
请查看并发布任何编辑或改进。
// 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);
}
});
}
编辑
更新的方法： https://github.com/jasonday/jQuery-UI-Dialog-extended
上面的存储库还包括以下选项：
将
maxWidthcreate$( ".selector" ).dialog({
width: "auto",
// maxWidth: 660, // This won't work
create: function( event, ui ) {
// Set maxWidth
$(this).css("maxWidth", "660px");
}
});
不需要 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;
}
我从多个来源收集了这些代码并将它们放在一起。这就是我想出响应式 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>
我已经成功地与旧的响应式对话框
<!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 结果上的窗口大小，然后单击“运行”。
我不确定我的简单解决方案是否能解决这个问题，但它适用于我想做的事情：
$('#dialog').dialog(
{
autoOpen: true,
width: Math.min(400, $(window).width() * .8),
modal: true,
draggable: true,
resizable: false,
});
也就是说，对话框以 400px 宽度打开，除非窗口的宽度需要更小的宽度。
非响应式是指如果宽度变窄，对话框会缩小，但响应式是指在特定设备上，对话框不会太宽。
$("#content").dialog({
width: 'auto',
create: function (event, ui) {
// Set max-width
$(this).parent().css("maxWidth", "600px");
}
});
这对我有用
如果您的网站有最大尺寸限制，那么以下方法将起作用。 将 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
});
我刚刚找到了这个问题的解决方案。
我粘贴了我的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;
}
我已经成功地做到了这样的响应式对话框。因为在
maxWidthvar wWidth = $(window).width();
var dWidth = wWidth * 0.8;
$('.selector').dialog({
height: 'auto',
width: 'auto',
create: function(){
$(this).css('maxWidth', dWidth);
}
});
感谢您的帖子！这节省了我很多时间。
不过，我还想补充一点，当对话框首次在某些屏幕尺寸上打开时，我得到了一些时髦的定位。如果您遇到此类错误，请尝试执行以下操作：
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");
}
希望这能让某人免于头痛 =)
谢谢，这使得响应迅速，但我仍然遇到对话框偏离中心的问题，因为我的内容（django 表单模板）是在对话框打开后加载的。因此，我调用
$( "#my-modal" ).load(myurl).dialog("open" );$( "#my-modal" ).dialog("open" );'open'fluidDialog()在对话框选项中（模态、流体、高度等）：
open: function () {
// call LOAD after open
$("#edit-profile-modal").load(urlvar, function() {
// call fluid dialog AFTER load
fluidDialog();
});
在我看来，接受的解决方案是相当有缺陷和过度设计的。我想出了dialogResize，它对于我的目的来说更干净、更简单。
像这样实现：
$("#dialog").dialogResize({
width: 600,
height: 400,
autoOpen: true,
modal: true
});
我喜欢CSS：
<style> .ui-dialog{ max-width: calc(100% - 20px) !important; } </style>对我来说，我最喜欢gracia的回答。 gracia 的答案的要点是使用简单的 JS 三元运算符来设置宽度：
$("#dialogDiscount").dialog({
autoOpen: false,
modal: true,
width: $(window).width() > 500 ? 450 : 300, //this is what fixed it for me
show: {
effect: "fade",
duration: 500
}
});
为了让您了解有关我的上下文的更多信息，我仅在 iPhone 上的纵向视图中遇到了太大的对话框问题。上面的 CSS 解决方案有时会产生显示转换的影响（开始时很大，然后变成较小的尺寸等），因此我认为以正确的尺寸创建对话框很重要。 gracia 的解决方案使用以像素为单位的数字，而不是百分比，因为以 px 为单位的数字是 jQuery-ui 对话框所期望的，而无需进行修改。希望这对某人有帮助！