jQuery UI Модальный диалог Полоса Проблема - PullRequest
Новая
       0

jQuery UI Модальный диалог Полоса Проблема

12 голосов
/ 08 июля 2010

У меня есть этот чрезвычайно простой модальный диалог jQuery UI, который я написал для тестирования здесь. Если я не пропускаю что-то, я не могу понять, почему это такая серая полоса в середине страницы.Я пытаюсь манипулировать модальным цветом фона и непрозрачностью, а также видеть в разметке CSS.

Ответы [ 5 ]

28 голосов
/ 08 июля 2010

Проблема в том, что заданный в jQuery UI фон не просто сплошной цвет, это изображение (для поддержки таких шаблонов, как полосы в оверлее).Когда вы настраиваете тему пользовательского интерфейса jQuery с themeroller, она генерирует это цветное изображение для вас.Чтобы исправить свою страницу, все, что вам нужно сделать, это отредактировать встроенный CSS на вашей странице в строке 48 от: 

background-color: #000;

до: 

background: #000;

Это переопределит всю спецификацию фона, а не только цвет.

ОБНОВЛЕНИЕ: Ник Крэйвер представил демо исправления на http://jsfiddle.net/QVXah/

14 голосов
/ 12 марта 2014

Этому вопросу более 3 лет, и проблема все еще сохраняется в jQuery.

Для меня сработало переопределение класса jQuery CSS, который определяет фон, добавив его в мой собственный файл CSS 

.ui-widget-overlay {
  background: #000;
}

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

Вы также можете установить 

background: none;

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

1 голос
/ 25 мая 2014

Мое решение было немного другим.Вместо того, чтобы менять цвет фона, я просто сделал его прозрачным: 

.ui-widget-overlay {
  opacity: 0;
}

Как и в случае с другими аналогичными решениями, я поместил это в файл .css, который загружается послезагружается из code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css.

Теперь я вижу только всплывающее окно, без каких-либо фоновых побочных эффектов.

0 голосов
/ 08 июля 2015

Если вы используете CDN и не хотите загружать / поддерживать другой css, используйте! Важное переопределение: 

.ui-widget-overlay {background: #BEBEBE !important;}
0 голосов
/ 08 июля 2010

Я видел эту проблему раньше, и я не уверен, почему она не была исправлена.Вы сможете исправить это, удалив строку ~ 285 из jquery-ui.css из 

.ui-widget-overlay {
    url("images/ui-bg_flat_0_aaaaaa_40x100.png") repeat-x scroll 50% 50% #AAAAAA
    ...
    }

Посмотрите, подходит ли вам это

...