it-swarm.com.ru

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

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

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

37
Jason

Ниже показано, как я получил адаптивный диалог 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

В хранилище выше также включены параметры для:

  • Нажмите за пределами диалогового окна, чтобы закрыть
  • Скрыть заголовок
  • скрыть кнопку закрытия
  • отзывчивый (адрес указан выше)
  • ширина шкалы и высота для отзывчивости (например: 80% ширины окна)
62
Jason

Настройка maxWidth на create работает нормально:

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

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

7
iautomation

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

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

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

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

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

3
Jeffrey Simon

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

<!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 result и нажмите «Выполнить». 

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

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

2
Himalaya Garg

Если ваш сайт ограничен максимальным размером, то подойдет следующий подход .. Присоедините стиль 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
kiranutt

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

Я вставил свой стиль 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
Fang Fang

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

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

$('.selector').dialog({
    height: 'auto',
    width: 'auto',
    create: function(){
        $(this).css('maxWidth', dWidth);
    }
});
0
everis

Спасибо, это делает отзывчивым, но у меня все еще была проблема с тем, что диалог был вне центра, так как мой контент (шаблон формы 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();
});
0
amchugh89

Спасибо за сообщения! Это сэкономило мне много времени. 

Я также хотел бы добавить, что я получал несколько прикольное позиционирование, когда диалоговое окно впервые открывалось на экранах определенного размера. Если вы столкнулись с такой ошибкой, попробуйте сделать что-то вроде этого:

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
Chandler Zwolle

Принятое решение является довольно глючным и перепроектированным IMO. Я придумал диалоговое окно Изменение размера , которое чище и проще для моих целей.

Реализуйте так:

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

Демо

0
Adam Jimenez