Я создаю модальный:
var modal = $modal.open({
templateUrl: "/partials/welcome",
controller: "welcomeCtrl",
backdrop: "static",
scope: $scope,
});
есть ли способ увеличить его ширину?
angularjs
angular-ui-bootstrap
Иван Бахер
источник
источник
Ответы:
Я использую такой класс css для нацеливания на класс модального диалога:
Затем в контроллере, вызывающем модальное окно, установите windowClass:
источник
.modal-dialog
Еще один простой способ - использовать 2 готовых размера и передать их в качестве параметра при вызове функции в вашем html. используйте: 'lg' для больших модальных окон шириной 900 пикселей 'sm' для маленьких модальных окон шириной 300 пикселей или без передачи параметров вы используете размер по умолчанию, который составляет 600 пикселей.
пример кода:
а в html я бы использовал что-то вроде следующего:
источник
Вы можете указать настраиваемую ширину для класса .modal-lg специально для вашего всплывающего окна для более широкого разрешения области просмотра. Вот как это сделать:
CSS:
JS:
источник
Когда мы открываем модальное окно, оно принимает размер в качестве параметра:
Возможные значения его размера:
sm, md, lg
HTML:
Если вам нужен какой-то конкретный размер, добавьте стиль в HTML-код модели:
источник
есть другой способ, которым вам не нужно перезаписывать классы uibModal и использовать их при необходимости: вы вызываете функцию $ uibModal.open с вашим собственным типом размера, например «xlg», а затем вы определяете класс с именем «modal-xlg», как показано ниже :
вызовите $ uibModal.open как:
и это будет работать. потому что любая строка, которую вы передаете в качестве начальной загрузки размера, будет сопоставлять ее с «модальным-», и это будет играть роль класса для окна.
источник
Мне было проще просто перенять шаблон из Bootstrap-ui. Я оставил закомментированный HTML-код на месте, чтобы показать, что я изменил.
Перезаписать их шаблон по умолчанию:
Измените шаблон диалогового окна (обратите внимание на DIV-оболочку, содержащую класс "modal-dialog" и класс "modal-content"):
А затем вызовите модальное окно с любым классом CSS или параметрами стиля, которые вы хотите изменить (при условии, что вы уже определили «приложение» где-то еще):
Добавьте кнопку «открыть» и стреляйте.
Теперь вы можете добавить любой дополнительный класс или просто изменить размеры ширины / высоты по мере необходимости.
Я также заключил его в директиву-оболочку, которая с этого момента должна быть тривиальной.
Ура.
источник
Я решил проблему с помощью решения Дмитрия Комина, но с другим синтаксисом CSS, чтобы он работал прямо в браузере.
CSS
JS то же самое:
источник
источник
Если вы хотите просто использовать большой размер по умолчанию, вы можете добавить 'modal-lg':
источник
Используйте max-width в модальном диалоге для angular 5
и используйте windowClass, как рекомендуют другие, TS, например:
Кроме того, мне пришлось поместить код css в глобальные стили> styles.css.
источник