Jquery ui диалоговое фиксированное позиционирование

Мне понадобилось диалоговое окно для сохранения фиксированной позиции, даже если страница прокручивалась, поэтому я использовал расширение 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');

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

Спасибо

Ответы

Ответ 1

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

Решение, которое я нашел, это установить родительский CSS-диалог для исправления PRIOR для открытия диалога.

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

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

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

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

Протестировано это полностью и пока не найдено ошибок.

Ответ 2

Я объединил некоторые предлагаемые решения для следующего кода. Прокрутка, перемещение и изменение размера отлично подходят для меня в 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);
    }
});

Update:

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

$.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 comment (I didn't test it)
            $(event.target).dialog('option','position',position);
            return true;
        }
    });
    this._oldinit();
};

Ответ 3

Я не мог получить ответ Скотта на работу с пользовательским интерфейсом jQuery 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
});

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

Ответ 4

Bsed on комментарий Langdons выше, я пробовал следующее, которое отлично работает с 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'); 
    }
});

Ответ 5

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

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

(из http://dev.jqueryui.com/ticket/2848)

Ответ 6

Подтвердите свое расположение диалогового окна position:fixed с помощью CSS

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

и определите класс myPosition css как:

.myPosition {
    position: fixed;
}

Ответ 7

$("#myDilog").dialog({
    create:function(){
        $(this).parent().css({position:"fixed"});
    }
});

Ответ 8

 $('#myDialog').dialog({ dialogClass: "flora" });
        $('.flora.ui-dialog').css({ top: "8px" });

это будет держать диалог в верхней позиции независимо от того, на что мы нажали.

Ответ 9

$('#'+tweetidstack.pop()).dialog("open").parent().css({position:"fixed"});

Зачем использовать $(document).ready? Это может быть недавняя разработка, но теперь она отлично работает.

Ответ 10

$( ".ui-dialog" ).css("position","fixed");  

$( ".ui-dialog" ).css("top","10px");

поместите этот код в открытую функцию диалога

Ответ 11

Сначала создайте свое диалоговое окно. Что-то вроде этого:

$("#dialog_id").dialog({
                autoOpen : false,
                modal : true,
                width: "auto",
                resizable: false,
                show: 'fade',
                hide: { effect:"drop",duration:400,direction:"up" },
                position: top,
                height: 'auto',
                title: "My awesome dialog",
                resizeStart: function(event, ui) {
                    positionDialog();
                },
                resizeStop: function(event, ui) {
                    positionDialog();
                }
            });
            $("#dialog_id").dialog('open');

Затем сделайте его автоцентром с помощью этого:

    function positionDialog (){
        setInterval(function(){
            if($("#dialog_id").dialog( "isOpen" )){
                $("#dialog_id").dialog('option','position',$("#dialog_id").dialog( "option", "position" ));
            }
        },500);
    }
//setInterval is for make it change position "smoothly"
//You can take it off and leave just the if clausule and its content inside the function positionDialog.

Ответ 12

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

//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

//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/

Ответ 13

В то время как аналогично некоторым другим ответам выше, я обнаружил, что мне нужно было сделать больше, чем просто 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').

Ответ 14

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

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

$(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 ");" в диалоговом окне декларации.

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