Где app.css в DurandalJS, который включает модальные окна?

Я пытаюсь заставить модальное окно работать в приложении с использованием структуры DurandalJS (SPA) и не могу получить модальное окно отображается правильно. В настоящее время, когда модальное окно открывается, оно отображается без блокировки и заполняет браузер по горизонтали.

неправильный модальный

("Каналы", кнопка "Новый канал" и ссылка "Выход" должны быть заблокированы.)

Я прочитал документацию несколько раз, и единственная подсказка, которую я могу найти, это примечание ниже раздел «Модальный контекст по умолчанию»:

Примечание. Модальный контекст по умолчанию имеет необходимый CSS для позиционирования, который можно найти в файле app.css. Предполагается, что целевой браузер поддерживает position: fixed. Если ваши целевые браузеры не поддерживают это, вам следует заменить модальный контекст по умолчанию пользовательской реализацией.

В нем упоминается файл app.css... Я не могу его найти. Я искал репозиторий DurandalJS на github и единственный файл app.css не содержит ничего, что действительно могло бы повлиять на это модальное окно (хорошо это или плохо). Любые подсказки?


javascript css durandal
person Byron Sommardahl    schedule 20.05.2013    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Содержание durandal.css должно помочь вам начать работу. https://github.com/BlueSpire/Durandal/blob/master/Content/durandal.css

.modalBlockout {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background: black;
    opacity: 0;

    pointer-events: auto;

    -webkit-backface-visibility: hidden;

    -webkit-transition: opacity 0.1s linear; 
    -moz-transition: opacity 0.1s linear; 
    -o-transition: opacity 0.1s linear;
    transition: opacity 0.1s linear; 
}

.modalHost {
    top: 50%;
    left: 50%;
    position: fixed;
    opacity: 0;

    -webkit-backface-visibility: hidden;

    -webkit-transition: opacity 0.1s linear; 
    -moz-transition: opacity 0.1s linear; 
    -o-transition: opacity 0.1s linear;
    transition: opacity 0.1s linear;
}

.messageBox {
    background-color: white;
    border: 1px solid #999;
    border: 1px solid rgba(0, 0, 0, 0.3);
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    outline: none;
    -webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
    box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding-box;
    background-clip: padding-box;
    min-width: 300px;
}
person RainerAtSpirit    schedule 20.05.2013
comment
Похоже, в данном случае документация не поспевает за изменениями, внесенными в Durandal. Я отправляю запрос на вытягивание. - person RainerAtSpirit; 21.05.2013