Отзывчивый Диалог jQuery UI (и исправление ошибки maxWidth)

со многими сайтами, использующими jQuery UI, есть некоторые основные недостатки, которые необходимо преодолеть, потому что jQuery UI не поддерживает адаптивный дизайн, и есть давняя ошибка, когда maxWidth используется в сочетании с width:'auto'.

таким образом, остается вопрос, как сделать диалог jQuery UI отзывчивым?

36
css jquery jquery-dialog jquery-ui responsive-design

13 ответов

ниже показано, как я достиг отзывчивого диалога jQuery UI.

для этого я добавил новую опцию в config -fluid: true, который говорит, чтобы сделать диалог отзывчивый.

затем я ловлю события resize и dialog open, чтобы изменить максимальную ширину диалога на лету и переместить диалог.

Вы можете увидеть его в действии здесь: 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% из окна ширина)
61

задание maxWidth on create работает:

$( ".selector" ).dialog({
  width: "auto",
  // maxWidth: 660, // This won't work
  create: function( event, ui ) {
    // Set maxWidth
    $(this).css("maxWidth", "660px");
  }
});
31

Я собрал эти коды из нескольких источников и собрал их вместе. Вот как я придумал отзывчивый Диалог 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>
6

нет необходимости в 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/

6

мне удалось ответить на диалог со старым 

<!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 результат и нажмите кнопку "Выполнить".

3

Если ваш сайт ограничен максимальным размером, то ниже подход будет работать. Прикрепите стиль 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
});
2

Я не уверен, что мое простое решение решает проблему этого вопроса, но оно работает для того, что я пытаюсь сделать:

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

то есть диалоговое окно открывается с шириной 400px, если ширина окна не требует меньшей ширины.

не реагирует в том смысле, что если ширина сужена, диалог сжимается, но реагирует в том смысле, что на определенном устройстве диалог не будет слишком широким.

2
$("#content").dialog({
    width: 'auto',
    create: function (event, ui) {
        // Set max-width
        $(this).parent().css("maxWidth", "600px");
    }
});

это сработало для меня

2

мне удалось сделать такой отзывчивый диалог. Потому что используйте percent on maxWidth выглядит странно.

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

$('.selector').dialog({
    height: 'auto',
    width: 'auto',
    create: function(){
        $(this).css('maxWidth', dWidth);
    }
});
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");
}

надеюсь, это спасет кого-то от головной боли =)

0

Я только что нашел решение этой проблемы.

я вставил свой стиль 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;
}
0

Спасибо, это делает отзывчивым, но у меня все еще была проблема с диалогом, находящимся вне центра b/c, мой контент (шаблон формы django) загружался после открытия диалога. Так вместо $( "#my-modal" ).load(myurl).dialog("open" );, Я называю $( "#my-modal" ).dialog("open" ); затем в диалоговом окне добавить параметр 'open' и вызовите нагрузку, затем ваш fluidDialog() функция:

в диалоговом окне Параметры (modal, fluid, height..и т. д.):

open: function () {
    // call LOAD after open
    $("#edit-profile-modal").load(urlvar, function() {
    // call fluid dialog AFTER load
    fluidDialog();
});
0

принятое решение довольно глючит и перегружено imo. Я придумал dialogResize что чище и проще для моих целей.

реализовать вот так:

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

демо

0