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

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 ]

0 голосов
/ 13 июня 2013

Сначала создайте свой диалог. Примерно так: 

$("#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.
0 голосов
/ 04 мая 2013 
$( ".ui-dialog" ).css("position","fixed");  

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

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

0 голосов
/ 24 марта 2011 
$('#'+tweetidstack.pop()).dialog("open").parent().css({position:"fixed"});

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

0 голосов
/ 23 июня 2010 
 $('#myDialog').dialog({ dialogClass: "flora" });
        $('.flora.ui-dialog').css({ top: "8px" });

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

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