Во многих сайтах, использующих jQuery UI, есть некоторые серьезные недостатки, которые необходимо преодолеть, поскольку пользовательский интерфейс jQuery не поддерживает отзывчивый дизайн, и существует многолетняя ошибка, когда maxWidth используется в сочетании с width:'auto'.
Итак, остается вопрос, как сделать диалог jQuery UI Dialog отзывчивым?
Ниже приведено то, как я получил гибкий диалог пользовательского интерфейса jQuery.
Чтобы сделать это, я добавил новую опцию в конфигурацию - 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
В вышеописанном репозитории также есть опции для:
Настройка maxWidth на create отлично работает:
$( ".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/
EDIT
Обновлена технология центрирования для поддержки изменения размера и перетаскивания
.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,
});
Таким образом, диалог открывается с шириной 400 пикселей, если ширина окна не требует меньшей ширины.
Не реагирует в том смысле, что если ширина сужается, диалог сжимается, но реагирует в том смысле, что на конкретном устройстве диалог не будет слишком большим.
Если ваш сайт ограничен максимальным размером, то подходом будет работать. Прикрепите стиль 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
});
$("#content").dialog({
width: 'auto',
create: function (event, ui) {
// Set max-width
$(this).parent().css("maxWidth", "600px");
}
});
Это работало для меня
Мне удалось сделать такой отклик. Потому что процент использования на maxWidth выглядел странно.
var wWidth = $(window).width();
var dWidth = wWidth * 0.8;
$('.selector').dialog({
height: 'auto',
width: 'auto',
create: function(){
$(this).css('maxWidth', dWidth);
}
});
Я нашел решение для этой проблемы.
Я вставил свой стиль 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;
}
Спасибо за сообщения! Это сэкономило мне много времени.
Я также хотел бы добавить, что я получал какое-то смешное позиционирование, когда диалог сначала открывался на определенных размерах экрана. Если вы столкнулись с такой ошибкой, попробуйте сделать что-то вроде этого:
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");
}
Надеюсь, это спасет кого-то головную боль =)
Спасибо, это делает отзывчивым, но у меня все еще была проблема с тем, что диалоговое окно offcenter b/c мое содержимое (шаблон формы django) загружалось после открытия диалога. Итак, вместо $( "#my-modal" ).load(myurl).dialog("open" ); я вызываю $( "#my-modal" ).dialog("open" ); Затем в диалоговом окне я добавляю опцию 'open' и вызываю нагрузку, а затем вашу функцию fluidDialog():
в параметрах диалога (модальный, жидкий, высота..etc):
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
});