JQuery UI Modal Dialog Stripe Issue

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

Ответ 1

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

background-color: #000;

background: #000;

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

UPDATE: Nick Craver предоставил демо-версию исправления в http://jsfiddle.net/QVXah/

Ответ 2

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

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

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

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

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

background: none;

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

Ответ 3

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

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

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

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

Ответ 4

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

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

Посмотрите, работает ли это для вас

Ответ 5

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

.ui-widget-overlay {background: #BEBEBE !important;}