14

Мы пытаемся перейти от Bootstrap 2.3.2 к Bootstrap 3 (RC1) и возникают проблемы с AngularJS Dialog directive. При нажатии соответствующей кнопки всплывающее окно диалога не появляется (страница отображается черным цветом. Щелчок в любом месте возвращается к исходному нечерному виду).Угловые диалоги с Bootstrap 3

Мы по существу используем тот же код, что и в приведенной выше ссылке.

Существует известная проблема, обсуждаемая here. В этой дискуссии Лютер говорит:

«чтобы модальный работал, добавить скрыть класс, чтобы установить дисплей: ни один модальным и обнуление дисплея модальной для блокирования»

Это, к сожалению, не кажется чтобы иметь какое-либо значение. Какие альтернативы мы могли бы использовать для получения диалогов в Bootstrap 3 RC1?

Я пробовал использовать Modal directive instead. У него есть аналогичная проблема, когда страница исчезает (а не становится полностью черной), и всплывающее окно также не появляется.

+0

могли бы вы сделать http://jsfiddle.com или http://plnkr.co вашей проблемы? –

+0

Возможный дубликат [Bootstrap 3 с AngularJS] (http://stackoverflow.com/questions/16327846/bootstrap-3-with-angularjs) и возможный дубликат http://stackoverflow.com/questions/18205329/does-angularui -bootstrap-support-twitter-bootstrap-3 –

+0

@KEB Почему бы не отметить ответ, если вы нашли какое-либо из них полезным? Cheers – superjos

ответ

-2

Пример кода, который вы используете, работает с Twitter Bootstrap 2.3.2. Почему вы ожидаете, что он должен работать с версией 3 Bootstrap 3 Twitter? Twitter Bootstrap 3 не обратно совместим с загрузочным блоком Twitter 2.x. Вам придется изменить/перенести свой HTML. Если вы используете Angular JS, вам придется перенести свои шаблоны. Большинство работ, похоже, сейчас готовы, см .: https://github.com/angular-ui/bootstrap/pull/742. http://www.bootply.com/bootstrap-3-migration-guide даст вам представление об изменениях, которые вам придется внести.

2

Там есть запрос тянуть заявлена, который содержит исправление для большинства проблем с Bootstrap 3.0 и директив AngularUi, включая вопросы с диалогами (которые были, конечно, самым досадных из них для меня!):

https://github.com/angular-ui/bootstrap/pull/742

(см Bootstrap 3 compatible with current AngularJS bootstrap directives?)

14

Как и другие ответы заявили, что это связанно с не нарушая изменений в Bootstrap 3. до угловой команды UI зафиксировали эти проблемы (в настоящее время в стадии разработки, см ветви bootstrap3_bis) есть css обходной путь только для диалога b волов подробно в this blog post:

.modal { display: block; } 

Рабочая plunkr доступна здесь:

http://plnkr.co/edit/nZT58YNKT84UlSwTvfpc?p=preview

+1

Спасибо, я добавил .modal { дисплей: блок; высота: 0; переполнение: видимое; } И это помогает обойти хотя бы одну проблему :) – JoshGough

+0

Спасибо. Связанный пример plunkr не работает для версии 0.6 (он работает для версии 0.5). Я получаю сообщение «Неизвестный провайдер: ошибка $ dialogProvider <- $ dialog». Любая идея о том, как это исправить? –

+1

Диалоговое окно @AlanKlement $ больше не используется, используя Modal, используйте его, включив 'ui.bootstrap.modal' и используя $ modal service. Страница проекта с угловым бутстрапом обновляется, как ее использовать. Также есть изменения API, так что не просто найти/заменить :) – Mutahhir

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