Угловая UI модальная директива, фон отсутствует

У меня нет фона при использовании модальной директивы UI Bootstrap http://angular-ui.github.io/bootstrap/. Сам модаль работает.Угловая UI модальная директива, фон отсутствует

Я пробовал как с ui-bootstrap-tpls.js (включая шаблон), так и без шаблонов (загрузка их вручную). Я сравнил разметку и css с одним из примера, и я не могу найти разницы. Все есть. Я использовал его несколько раз раньше, и это первый раз, когда я сталкиваюсь с этой проблемой. Разница на этот раз заключается в том, что я использую sass-версию bootstrap. Может быть, что-то с этим связано? У меня нет идей, куда искать.

Мои версии:

"angular": "1.2.24", 
"angular-animate": "~1.2.24" 
"angular-bootstrap": "~0.11.2", 
"bootstrap-sass-official": "~3.3.1",

Любые идеи кто-нибудь?

источник

2014-11-14 Per

Хм, я столкнулся с множеством вопросов с угловым и модальным, поэтому я только начал использовать AngularStrap (представленный в ng-europe), должен проверить его: http://mgcrea.github.io/angular-strap /, он работал намного лучше для меня – Linial

Какая версия twitter bootstrap вы, а также какая версия UI-директив? – JMK

@JMK обновленный вопрос с версиями. – Per

от ссылки Maxisam на запрос на растяжение: https://github.com/angular-ui/bootstrap/pull/3117

самый простой фикс просто добавить следующий CSS:

html { 
    height: 100%; 
} 

body { 
    min-height: 100%; 
} 

.modal-backdrop { 
    bottom: 0; 
}

Надеюсь, это не будет нарушать ваш код :-)

источник

2015-01-06 05:27:10 fotoflo

Это сработало для меня. Благодаря! – IanB

Я отказался от Bootstrap 3.2.0 до 3.1.1, как это было предложено @ per-ström, до применения этого CSS.Я не уверен, что это было необходимо, но совместный эффект разрешил проблему. –

Это исправление работало для меня на ui-bootstrap 0.12.1 и Bootstrap 3.2.2, поэтому переоценка, вероятно, не нужна. – Fasermaler

Как указано в указателях углового-ui. Он поддерживает Bootstrap 3.1.1. Таким образом, решение должно было понизиться.

источник

2014-11-14 15:16:19 Per

Попробуйте PR

Plunker

В основном вам просто нужно добавить одну строку в директиве 'модальное окно'

angular.element($document[0].querySelectorAll('div.modal-backdrop')).css('height',element[0].scrollHeight + 'px');

и впрыснуть $ документ

источник

2014-12-17 07:36:36 maxisam

Существует обходной путь вы можете сделать

1- добавить CSS класс:

.modal-backdrop{ 
bottom: 0; 
position: fixed; 
}

2- убедитесь, что «window.html» файл шаблона включен «нг-нажмите» кануна нт

<div tabindex="-1" role="dialog" class="modal fade" ng-class="{in: animate}" ng-style="{'z-index': 1050 + index*10, display: 'block'}" ng-click="close($event)"> 
    <div class="modal-dialog" ng-class="{'modal-sm': size == 'sm', 'modal-lg': size == 'lg'}"><div class="modal-content" modal-transclude></div></div> 
</div>

источник

2015-02-09 19:01:33 MAbdulHalim

позиция фиксированная помощь мне! был добавлен снизу: 0; Благодарю. – JAVAvladuxa

К сожалению, ответ, где bottom:0; указан не совсем корректно - в некоторых случаях это происходит (и это особенно верно для пользовательского интерфейса вида маршрутизатора), что есть некоторое пустое пространство слева внизу на фоне. Таким образом, я хотел бы предложить просто добавить следующий код:

.modal-backdrop { 
    bottom: -100%; 
}

Как фон добавляется к уровню тела, оно не должно нарушать ничего и абсолютно гарантированно не оставлять непокрытой пространство под фон.

источник

2015-06-24 16:00:27

Угловая UI модальная директива, фон отсутствует

ответ

Смежные вопросы