JQuery UI диалоговое окно UI-виджет-проблема с оверлеем высоты - PullRequest
Новая
       1

JQuery UI диалоговое окно UI-виджет-проблема с оверлеем высоты

3 голосов
/ 11 мая 2011

Я занимаюсь разработкой приложения для Facebook.

В этом приложении я использую диалоговое окно jquery ui для отображения содержимого div (которое приходит из ответа ajax).

Откроется диалоговое окно, прекрасно показывающее содержимое, возвращаемое при вызове ajax. Но происходит странное поведение. страница (кажется, мое приложение вызывается в fb iframe) постоянно обновляет , как будто оно публикует некоторые данные на постоянной основе. Более того, высота элемента "ui-widget-overlay" div , который динамически генерируется диалоговым окном пользовательского интерфейса, непрерывно увеличивается и, похоже, никогда не становится стабильной. Может быть, эти два странных поведения как-то связаны. Не могу понять.

В связи с этим, даже если я использую свойство " modal: true " для своего диалога, я могу получить доступ ко всей странице за диалогом.

Фрагмент моего кода: 

$.ajax({

            type : "POST",
            data : "id=1",
            url : site_url + "lists/add_new",
            success : function(response) {
                $('#new_box').html(response);

                $('#new_box').dialog({                  
                    modal: true,
                    position: 'top'
                });
                $('#new_box').dialog( "open" );
                return false;               
            },
            error   : function(XMLHttpRequest, textStatus, errorThrown) {               
                alert(textStatus);
            }

        });

Пожалуйста, руководство.

Спасибо

UPDATE:

Похоже, я нашел виновника:

Установка свойства "modal" в значение "true" приводила к постоянному изменению размера наложения (прозрачного div между диалоговым окном и документом), принимая ширину и высоту документа, что, обнаружив при отладке диалогового окна js в Chrome, увеличивалось навечно. Не уверен, что вызывает то, что происходит: |

Теперь, когда я установил «модальный» на «ложь», все работает отлично, потому что больше нет «наложения», но, конечно, теперь я должен найти какое-то решение, чтобы «отключить» мой документ.

Любая подсказка, как я могу использовать "модальное" свойство как "true" ??

спасибо

Ответы [ 3 ]

0 голосов
/ 11 мая 2011

Что касается доступа к странице позади даже в модальном режиме, так как вы находитесь в iframe, то div для захвата событий не распространяется за пределы вашего iFrame. Для этого есть веские причины, но в тех случаях, когда мы (разработчики приложений для FB) должны на законных основаниях делать это, это раздражает.

Теперь, если модал не делает вашу страницу в модале iFrame, это нечто другое.

0 голосов
/ 06 августа 2011

У меня была та же проблема, и способ, которым я это исправил, заключался в добавлении встроенного стиля с использованием jquery после того, как в диалоге появилось что-то вроде этого: 

$('.ui-widget-overlay').attr('style', 'height: 1001px !important; z-index: 1001;');

Я считаю, что важно, чтобы он работал. Благодаря этому методу вставки строка кода заменяет встроенный стиль jquery ui-widget-overlay, который был отправлен в браузер. Я нашел это трудным путем, потому что я изначально не помещал z-index, поэтому он сделал наложение поверх диалогового окна, что сделало диалог не щелкаемым. Короче говоря, вам, возможно, придется поиграться со значением z-index.

0 голосов
/ 11 мая 2011

Вы пытаетесь инициализировать диалог при вызове ajax, поэтому каждый раз Jquery инициализирует новый диалог. Пожалуйста, попробуйте это:

onload инициализирует диалог. 

$(function(){
$('#new_box').dialog({                  
                    modal: true,
                    position: 'top'
                });
});

В вашем вызове ajax просто вызовите диалог, используя open. 

$.ajax({

            type : "POST",
            data : "id=1",
            url : site_url + "lists/add_new",
            success : function(response) {
                $('#new_box').html(response);

                $('#new_box').dialog( "open" );
                return false;               
            },
            error   : function(XMLHttpRequest, textStatus, errorThrown) {               
                alert(textStatus);
            }

        });

НТН

...