JQuery UI Modal Dialog следует фиксировать на прокрутке

Есть ли возможность исправить модальное окно для пользовательского интерфейса jQuery, поэтому, когда пользователь использует скроллер с правой стороны, сторона за свитками, но модальное окно остается фиксированным?

Ответ 1

Создайте класс css с фиксированной позицией:

.fixed-dialog{
  position: fixed;
  top: 50px;
  left: 50px;
}

Затем добавьте класс как часть параметров при создании диалога:

$( ".selector" ).dialog({ dialogClass: 'fixed-dialog' });

Вот рабочий пример: http://jsfiddle.net/3hrSv/ Пример не слишком яркий, потому что я не мог заставить jsfiddle вставить диалог.

Если вы хотите центрировать диалог в середине экрана, попробуйте установить top:50%; left:50%; в свой css, как предложено: http://css-tricks.com/320-quick-css-trick-how-to-center-an-object-exactly-in-the-center/

Ответ 2

Если вы хотите, чтобы все ваши диалоги имели такое поведение, вы можете изменить свой файл jquery.ui.dialog.css.

Изменить:

.ui-dialog { position: absolute; padding: .2em; width: 300px; overflow: hidden; }

To:

.ui-dialog { position: fixed; padding: .2em; width: 300px; overflow: hidden; }

или, если вы хотите сохранить исходный файл, просто добавьте строку:

div.ui-dialog {position:fixed;}

в один из ваших файлов css, на которые ссылается страница, или блок стиля на странице.

Ответ 3

Это старый вопрос, но я обнаружил, что ответ Джеймса (для пересмотра диалогового окна JQuery div.ui-to position: fixed) дал половину ответа на этот вопрос. Другая половина такова: убедитесь, что высота родительского элемента равна 100%. В моем случае тело является родительским для моих диалогов, поэтому у меня есть эта строка:

<body style='height: 100%; min-height: 100%;'>

Это, плюс предложение Джеймса добавить это в мой CSS файл:

div.ui-dialog {position:fixed;}

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

Ответ 4

Или применить CSS при его создании:

        $("#Modal").dialog({
        autoOpen: false,
        width: 500,
        height: 'auto',
        position: [50, 150],
        create: function (event) {
            $(event.target).parent().css({ 'position': 'fixed', "left": 50, "top": 150 });
          }
        });