Диалоговое окно Jquery UI Overlay Высота и ширина не соответствуют размеру окна - PullRequest
Новая
       27

Диалоговое окно Jquery UI Overlay Высота и ширина не соответствуют размеру окна

6 голосов
/ 01 октября 2011

Проблема

При оверлейном интерфейсе Jquery UI появляются полосы прокрутки браузера.Я использую последний Jquery и Jquery UI без какой-либо темы.

Код 

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<script src="includes/js/jquery-1.6.2.min.js" type="text/javascript"></script>
<script src="includes/js/jquery-ui-1.8.16.custom.min.js" type="text/javascript"></script>
</head>

<body>
<a href="#">open modal</a>
<div id="dialog" style="display:none;">test</div>

<script type="text/javascript">
    $('a').click(function () {      
        $('#dialog').dialog({modal: true});
    });
</script>
</body>
</html>

Это очень просто.Я понятия не имею, почему он создает полосы прокрутки.

Есть идеи на этот счет?Я буду очень рад.

Заранее спасибо.

PS Я пытаюсь добавить Jquery UI к теме, с которой мне нужно работать.Я пытался уничтожить как можно больше правил CSS.

Сейчас я не уверен, не связана ли эта проблема с FireFox (7.0.1).Когда я использую модальное диалоговое окно на тему (пользовательский интерфейс имеет тему), с которым я работаю и возвращаюсь к test.html (без темы пользовательского интерфейса), проблема возникает снова.Если я использую в обоих окнах (с темой) оба в порядке с темой.

Кто-нибудь сталкивался с подобной проблемой?

Ответы [ 3 ]

30 голосов
/ 29 июля 2013

Я тоже столкнулся с этой проблемой.Добавление следующего CSS исправило это. 

.ui-widget-overlay {
   position: fixed;
}
4 голосов
/ 02 октября 2011

Я решил свою проблему с помощью blockUI .

Если кто-то сталкивается с подобной проблемой, здесь есть другое возможное решение; 

//Get The Height Of Window
var height = $(window).height();
//Change Overlay Height
$(".jquery-ui-dialog-overlay-element").css('height',height);

Еслиу вас возникают проблемы, связанные с шириной, вы можете сделать то же самое, добавив на свою страницу переменную var width = $(window).width(); и изменив ширину наложения с помощью .css ()

2 голосов
/ 02 октября 2011

Кто-нибудь сталкивался с подобной проблемой?

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

html {overflow-y: scroll;}

Не уверен, что это работает с вашей темой, но стоит попробовать.

...