Диалоговое окно jQuery UI: вертикальная прокрутка работает неправильно, если высота диалога больше, чем высота окна - PullRequest
Новая
       3

Диалоговое окно jQuery UI: вертикальная прокрутка работает неправильно, если высота диалога больше, чем высота окна

5 голосов
/ 25 декабря 2011

Вот код: 

<script type="text/javascript">
    $(function(){
        var dialogOptions = {
            title: "Header",
            autoOpen: false,
            modal: true,
            width: 400,
            height: 1000
        };
        $(".wnd").dialog(dialogOptions);
        $("#btn").click(function(){ $(".wnd").dialog("open"); });
    });
</script>

<style>
    .wnd {background:yellow;height:900px;width:300px;}
</style>

<div class="wnd"></div>
<button id="btn">click me</button>

Когда диалоговое окно открыто и находится выше основного окна, появляется боковой ползунок, и он не скользит вниз, если вы пытаетесь перетащить его с помощью курсора мыши (он выглядит как заблокированный).

Но он отлично скользит, когда нажимаешь кнопку (стрелку) на клавиатуре или прокручиваешь колесо мыши.

Вот демоверсия на jsfiddle .

Как активировать этот боковой ползунок?

Спасибо!

Ответы [ 2 ]

3 голосов
/ 20 июня 2013

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

По крайней мере, в той версии jQueryUI, в которой я (1.9) мне нужно было указать максимальную высоту самостоятельно, потому что свойство maxHeight, которое должно использоваться в соответствии с документацией didn ' т работа *.

Вот что сработало: 

$("#dialog").dialog({
    modal: true,
    width: "auto",
    height: "auto"
    /* maxHeight: whatever won't work, */
}).css("maxHeight", window.innerHeight-120);

Я вычел 120 пикселей из высоты окна, чтобы приспособить его к заголовку и окну диалогового окна с помощью кнопки «ОК».

* Максимальная высота действительно будет действовать, если попытаться изменить размер диалогового окна, но не при отображении.

3 голосов
/ 23 апреля 2012

Чистое решение будет выглядеть следующим образом:

http://jsfiddle.net/4fc33/6/

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

...