jquery UI диалог фиксированного позиционирования - PullRequest
Новая
       29

jquery UI диалог фиксированного позиционирования

36 голосов
/ 17 апреля 2010

Мне нужно было диалоговое окно, чтобы сохранить его положение, даже если страница прокручивалась, поэтому я использовал расширение на http://forum.jquery.com/topic/dialog-position-fixed-12-1-2010, но есть 2 проблемы с ним:

  • мигает в IE и Firefox при прокрутке страницы (в Safari / Chrome все нормально)

  • при закрытии и последующем открытии теряет липкость и прокручивается вместе со страницей.

Вот код, который я использую для создания диалога: 

$('<div id="'+divpm_id+'"><div id="inner_'+divpm_id+'"></div><textarea class="msgTxt" id="txt'+divpm_id+'" rows="2"></textarea></div>')
                .dialog({
                autoOpen: true,
                title: user_str,
                height: 200,
                stack: true,
                sticky: true //uses ui dialog extension to keep it fixed
     });

А вот код, который я использую для его повторного открытия: 

jQuery('#'+divpm_id).parent().css('display','block');

Предложения / решения?

Спасибо

Ответы [ 14 ]

41 голосов
/ 28 июня 2011

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

Решение, которое я нашел, состояло в том, чтобы установить CSS родительского диалогового окна в фиксированное значение PRIOR для открытия диалога. 

$('#my-dialog').parent().css({position:"fixed"}).end().dialog('open');

Предполагается, что вы уже инициализировали диалог с autoOpen, установленным в false.

Обратите внимание, это не работает, если размер диалогового окна изменен. Оно должно быть инициализировано с отключенным изменением размера, чтобы позиция оставалась фиксированной. 

$('#my-dialog').dialog({ autoOpen: false, resizable: false });

Тщательно проверил это и пока не нашел ошибок.

31 голосов
/ 11 февраля 2012

Я объединил некоторые предложенные решения для следующего кода. Прокрутка, перемещение и изменение размера прекрасно работают в Chrome, FF и IE9. 

$(dlg).dialog({
    create: function(event, ui) {
        $(event.target).parent().css('position', 'fixed');
    },
    resizeStop: function(event, ui) {
        var position = [(Math.floor(ui.position.left) - $(window).scrollLeft()),
                         (Math.floor(ui.position.top) - $(window).scrollTop())];
        $(event.target).parent().css('position', 'fixed');
        $(dlg).dialog('option','position',position);
    }
});

Обновление:

Если вы хотите установить его по умолчанию для всех диалогов: 

$.ui.dialog.prototype._oldinit = $.ui.dialog.prototype._init;
$.ui.dialog.prototype._init = function() {
    $(this.element).parent().css('position', 'fixed');
    $(this.element).dialog("option",{
        resizeStop: function(event,ui) {
            var position = [(Math.floor(ui.position.left) - $(window).scrollLeft()),
                            (Math.floor(ui.position.top) - $(window).scrollTop())];
            $(event.target).parent().css('position', 'fixed');
            // $(event.target).parent().dialog('option','position',position);
            // removed parent() according to hai's comment (I didn't test it)
            $(event.target).dialog('option','position',position);
            return true;
        }
    });
    this._oldinit();
};
8 голосов
/ 28 декабря 2012

Мне не удалось получить ответ Скотта для работы с jQuery UI 1.9.1.Мое решение состоит в том, чтобы изменить положение диалога в обратном вызове из события open.Сначала установите фиксированное положение CSS.Затем поместите диалоговое окно в нужное вам место: 

$('selector').dialog({
    autoOpen: false,
    open: function(event, ui) {
        $(event.target).dialog('widget')
            .css({ position: 'fixed' })
            .position({ my: 'center', at: 'center', of: window });
    },
    resizable: false
});

Примечание. Как отмечено в другом ответе, изменение размера диалогового окна снова установит его значение на absolute , поэтому я отключил изменяемый .

7 голосов
/ 03 марта 2013

Bsed на комментарии Лэнгдона выше, я попробовал следующее, которое отлично работает с jQuery-UI 1.10.0 и диалоговыми окнами с изменяемым размером: 

$('#metadata').dialog(
{
    create: function (event) {
    $(event.target).parent().css('position', 'fixed'); 
    },
    resizeStart: function (event) {
    $(event.target).parent().css('position', 'fixed'); 
    },
    resizeStop: function (event) {
    $(event.target).parent().css('position', 'fixed'); 
    }
});
4 голосов
/ 19 июня 2010

попробовать: 

$(document).ready(function() {
  $('#myDialog').dialog({dialogClass: "flora"});
  $('.flora.ui-dialog').css({position:"fixed"});
)};

(от http://dev.jqueryui.com/ticket/2848)

2 голосов
/ 08 июля 2012

Заставьте позицию вашего диалогового окна быть position:fixed, используя CSS 

$('.selector').dialog({ dialogClass: 'myPosition' });

и определите класс myPosition css следующим образом: 

.myPosition {
    position: fixed;
}
1 голос
/ 26 августа 2015 
$("#myDilog").dialog({
    create:function(){
        $(this).parent().css({position:"fixed"});
    }
});
0 голосов
/ 06 декабря 2017

Как я написал в своем блоге https://xbrowser.altervista.org/informatica-portata/jquery-easyui-bug-fix-window-dialog-position-widget/ Я нашел ошибку в элементе «окна» или «диалоге». Когда вы создаете экземпляр этого виджета, он выходит из главного окна браузера, в частности в верхнем и левом положении (когда вы перетаскиваете или изменяете его размер). Чтобы решить эту проблему, я реализовал это решение.

Вы можете прочитать исходный код ниже: 

$(dialog).window({
   onMove: function(left, top) {
   if (left < 0 || top < 0) {
     left = (left < 0) ? 0 : left;
     top = (top < 0) ? 0 : top;
     $(this).window('move', {left: left, top: top});
   }
},
onResize: function(width, height) {
  var opt = $(this).window("options");
  var top = opt.top;
  var left = opt.left;
  if (top < 0) {
    top = (top < 0) ? 0 : top;
    $(this).window('move', {left: left, top: top});
  }
}
}).window("open");

The same code is for dialog:

$(dialog).dialog({
  onMove: function(left, top) {
  if (left < 0 || top < 0) {
     left = (left < 0) ? 0 : left;
     top = (top < 0) ? 0 : top;
     $(this).dialog('move', {left: left, top: top});
  }
},
onResize: function(width, height) {
   var opt = $(this).window("options");
   var top = opt.top;
   var left = opt.left;
   if (top < 0) {
     top = (top < 0) ? 0 : top;
     $(this).dialog('move', {left: left, top: top});
   }
}
}).dialog("open");

Кроме того, когда вы вызываете «$(this).window(“options”);» внутри метода «onResize» и запускаете приложение, вы не видите окна; поэтому я должен вставить «.window (« open »);» в и объявления диалога.

Я надеюсь помочь вам.

0 голосов
/ 15 мая 2017

Хотя и аналогично некоторым другим ответам выше, я обнаружил, что мне нужно было сделать больше, чем просто position: fix диалоговое окно, но мне также пришлось position: static его содержимое, чтобы сохранить его привязанным к диалогу. 

$('<div id="myDialog" class="myClass">myContent</div>')
        .dialog(dialogOptions)
        .parent()
        .css({ position: 'fixed' })
        .end()
        .position({ my: 'center', at: 'center', of: window })
        .css({ position: 'static' });

После этого я могу звонить .dialog('open') в любое время, когда захочу, и он просто появится там, где я его оставил. У меня фактически есть это в функции, которая возвратит существующее диалоговое окно или создаст новое по мере необходимости, и затем я просто изменяю значения диалогового окна прежде, чем .dialog('open') будет вызван.

0 голосов
/ 05 июля 2014

Решение на самом деле очень простое. Я не знаю, применимо ли это, когда вопрос был задан, но все равно теперь. 

//First a container/parent-div with fixed position is needed
var dialogContainer=document.body.appendChild(document.createElement("div"));
dialogContainer.style.position="fixed";
dialogContainer.style.top=dialogContainer.style.left="50%";//helps centering the window

1004 * 

//Now whenever a dialog is to be created do it something like this:
$(myDialogContent).dialog({
    appendTo: dialogContainer,
    position: { 
        at: 'center center',
        of: dialogContainer
    }
});

О "appendTo": http://api.jqueryui.com/dialog/#option-appendTo
О "позиции": http://api.jqueryui.com/position/

Страница:
...