Отзывчивый Диалог jQuery UI (и исправление ошибки maxWidth)
со многими сайтами, использующими jQuery UI, есть некоторые основные недостатки, которые необходимо преодолеть, потому что jQuery UI не поддерживает адаптивный дизайн, и есть давняя ошибка, когда maxWidth
используется в сочетании с width:'auto'
.
таким образом, остается вопрос, как сделать диалог jQuery UI отзывчивым?
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% из окна ширина)
задание maxWidth
on create
работает:
$( ".selector" ).dialog({
width: "auto",
// maxWidth: 660, // This won't work
create: function( event, ui ) {
// Set maxWidth
$(this).css("maxWidth", "660px");
}
});
Я собрал эти коды из нескольких источников и собрал их вместе. Вот как я придумал отзывчивый Диалог 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>
нет необходимости в 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;
}
мне удалось ответить на диалог со старым
<!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 результат и нажмите кнопку "Выполнить".
Если ваш сайт ограничен максимальным размером, то ниже подход будет работать. Прикрепите стиль 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
});
Я не уверен, что мое простое решение решает проблему этого вопроса, но оно работает для того, что я пытаюсь сделать:
$('#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");
}
});
это сработало для меня
мне удалось сделать такой отзывчивый диалог. Потому что используйте percent on maxWidth
выглядит странно.
var 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");
}
надеюсь, это спасет кого-то от головной боли =)
Я только что нашел решение этой проблемы.
я вставил свой стиль 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;
}
Спасибо, это делает отзывчивым, но у меня все еще была проблема с диалогом, находящимся вне центра 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();
});
принятое решение довольно глючит и перегружено imo. Я придумал dialogResize что чище и проще для моих целей.
реализовать вот так:
$("#dialog").dialogResize({
width: 600,
height: 400,
autoOpen: true,
modal: true
});