Модальные диалоги Jquery ОТКЛЮЧИТЬ полосы прокрутки - PullRequest
Новая
       15

Модальные диалоги Jquery ОТКЛЮЧИТЬ полосы прокрутки

7 голосов
/ 20 января 2012

Как видно по этой ссылке, http://jsbin.com/ozapol/9,

Jquery отключает полосы прокрутки в некоторых версиях IE и последней версии Chrome. (Я еще не пробовал ...)

Есть ли способ оставить полосы прокрутки включенными, чтобы иметь возможность прокручивать длинный длинный диалог?

Спасибо! Bye

Отличное решение для Internet Explorer (Спасибо jk.) 

html {overflow-y : scroll}

Жестокий обходной путь для Chrome (Спасибо JK.)

В Chrome JqueryUI перехватывает события мыши на полосах прокрутки. Это похоже на ошибку, которая упоминается в ссылках выше. Чтобы удалить эти привязки, вы должны отменить привязку событий каждый раз, когда вы создаете модальный диалог: 

$("#longdialog").dialog({
     open: function(event, ui) {
        window.setTimeout(function() {
            jQuery(document).unbind('mousedown.dialog-overlay')
                            .unbind('mouseup.dialog-overlay');
        }, 100);
    },
   modal:true
});

Вот последний пример: http://jsbin.com/ujagov/2

Ссылки на сообщения об ошибках:

  1. http://bugs.jqueryui.com/ticket/4671
  2. http://wiki.jqueryui.com/w/page/34725121/Visual-Test-Page-Cleanup

Ответы [ 4 ]

5 голосов
/ 20 января 2012

Вы можете оставить полосы прокрутки включенными: 

html {overflow-y: scroll;}

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

И, возможно, вам придется отменить привязку событий мыши, которые захватывает модальное диалоговое окно: 

$("#longdialog").dialog({
     open: function(event, ui) {
        window.setTimeout(function() {
            jQuery(document).unbind('mousedown.dialog-overlay')
                            .unbind('mouseup.dialog-overlay');
        }, 100);
    },
   modal:true
});

См. Проблема с полосой прокрутки в диалоговом окне пользовательского интерфейса jQuery в Chrome и Safari

2 голосов
/ 21 февраля 2013

Эта ошибка исправлена ​​в jQueryUi-1.10. Вот ссылка с вопросом http://bugs.jqueryui.com/ticket/4671.

0 голосов
/ 12 декабря 2013

Если вы не хотите или не можете перейти на jQuery UI 1.10, это решение для вас:

https://stackoverflow.com/a/7740756/354756

0 голосов
/ 20 января 2012

Добавьте следующий код в ваш css-файл: 

 .ui-dialog .ui-dialog-content {
    overflow-y: scroll;

 }
 #longdialog{
    height: 450px;

 }

Переполнение не работает, потому что высота была установлена ​​на auto, определите конкретную высоту для контейнера div

...