44

许多网站都使用 jQuery UI，有一些主要缺点需要克服，因为 jQuery UI 不支持响应式设计，并且maxWidth与width:'auto'.

所以问题仍然存在，如何让 jQuery UI Dialog 响应式？

4

14 回答 14

68

下面是我如何实现响应式 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%）
于 2013-05-09T22:03:36.817 回答
41

设置maxWidth工作create正常：

$( ".selector" ).dialog({
  width: "auto",
  // maxWidth: 660, // This won't work
  create: function( event, ui ) {
    // Set maxWidth
    $(this).css("maxWidth", "660px");
  }
});
于 2013-11-26T13:42:15.497 回答
10

不需要 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/

于 2015-10-23T02:35:09.767 回答
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>
于 2015-07-09T15:53:59.140 回答
3

我已经设法与旧的响应式对话 

<!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结果上调整窗口大小，然后单击“运行”。

于 2014-10-05T22:38:56.000 回答
3

我不确定我的简单解决方案是否解决了这个问题，但它适用于我正在尝试做的事情：

$('#dialog').dialog(
{
    autoOpen: true,
    width: Math.min(400, $(window).width() * .8),
    modal: true,
    draggable: true,
    resizable: false,
});

也就是说，对话框以 400 像素的宽度打开，除非窗口的宽度需要更小的宽度。

如果宽度变窄，对话框会缩小，则不是响应式的，但在特定设备上，对话框不会太宽的意义上是响应式的。

于 2015-11-01T21:03:03.963 回答
3 
$("#content").dialog({
    width: 'auto',
    create: function (event, ui) {
        // Set max-width
        $(this).parent().css("maxWidth", "600px");
    }
});

这对我有用

于 2016-08-24T16:29:10.603 回答
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
});
于 2014-04-14T19:56:06.203 回答
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;
}
于 2016-06-08T17:43:56.143 回答
1

我设法做到了这样的响应式对话。因为使用百分比maxWidth看起来很奇怪。

var wWidth = $(window).width();
var dWidth = wWidth * 0.8;

$('.selector').dialog({
    height: 'auto',
    width: 'auto',
    create: function(){
        $(this).css('maxWidth', dWidth);
    }
});
于 2014-01-16T15:05:37.313 回答
0

感谢您的帖子！这为我节省了大量时间。

不过，我还想补充一点，当对话框首次在某些屏幕尺寸上打开时，我得到了一些时髦的定位。如果遇到此类错误，请尝试执行以下操作：

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");
}

希望这可以让某人头疼=）

于 2014-01-21T20:16:07.273 回答
0

接受的解决方案是相当多的错误和过度设计的 imo。我想出了对我的目的来说更简洁、更直接的dialogResize 。

像这样实现：

$("#dialog").dialogResize({
  width: 600,
  height: 400,
  autoOpen: true,
  modal: true
});

演示

于 2018-02-07T20:15:30.247 回答
0

谢谢，这可以响应，但是我仍然遇到对话框偏离中心的问题，因为我的内容（django 表单模板）在对话框打开后正在加载。所以代替，我在对话框中$( "#my-modal" ).load(myurl).dialog("open" );调用 Then ，添加选项并调用负载，然后调用你的函数： $( "#my-modal" ).dialog("open" );'open'fluidDialog()

在对话框选项（模态、流体、高度..等）中：

open: function () {
    // call LOAD after open
    $("#edit-profile-modal").load(urlvar, function() {
    // call fluid dialog AFTER load
    fluidDialog();
});
于 2015-11-10T17:54:46.557 回答
-1

对我来说，我最喜欢格拉西亚的回答。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 对话框所期望的，而无需修改。希望这对某人有帮助！

于 2020-07-31T17:29:46.577 回答