Tworzę modal:
var modal = $modal.open({
templateUrl: "/partials/welcome",
controller: "welcomeCtrl",
backdrop: "static",
scope: $scope,
});
czy jest sposób na zwiększenie jego szerokości?
angularjs
angular-ui-bootstrap
Ivan Bacher
źródło
źródło
Odpowiedzi:
Używam takiej klasy CSS, aby kierować na klasę modalnego okna dialogowego:
Następnie w kontrolerze wywołującym okno modalne ustaw windowClass:
źródło
.modal-dialog
Innym prostym sposobem jest użycie 2 gotowych rozmiarów i przekazanie ich jako parametru podczas wywoływania funkcji w html. użyj: 'lg' dla dużych modali o szerokości 900px 'sm' dla małych modali o szerokości 300px lub nie przekazując żadnego parametru, używasz domyślnego rozmiaru, który wynosi 600px.
przykładowy kod:
a w html użyłbym czegoś takiego:
źródło
Możesz określić niestandardową szerokość dla klasy .modal-lg specjalnie dla twojego wyskakującego okienka, aby uzyskać szerszą rozdzielczość widoku. Oto jak to zrobić:
CSS:
JS:
źródło
Kiedy otwieramy modal, akceptujemy rozmiar jako paramenter:
Możliwe wartości dla tego rozmiaru:
sm, md, lg
HTML:
Jeśli chcesz mieć określony rozmiar, dodaj styl do kodu HTML:
źródło
jest inny sposób, w którym nie musisz nadpisywać klas uibModal i używać ich w razie potrzeby: wywołujesz funkcję $ uibModal.open swoim własnym typem rozmiaru, np. "xlg", a następnie definiujesz klasę o nazwie "modal-xlg" jak poniżej :
zadzwoń do $ uibModal.open jako:
i to zadziała. ponieważ dowolny napis, który podasz jako rozmiar bootstrap, będzie współdziałał z "modalnym-" i będzie to odgrywać rolę klasy dla okna.
źródło
Łatwiej mi było po prostu przejąć szablon z Bootstrap-ui. Pozostawiłem skomentowany kod HTML nadal na miejscu, aby pokazać, co zmieniłem.
Zastąp ich domyślny szablon:
Zmodyfikuj szablon okna dialogowego (zwróć uwagę na DIV opakowania zawierające klasę „modal-dialog” i klasę „modal-content”):
Następnie wywołaj modal z dowolną klasą CSS lub parametrami stylu, które chcesz zmienić (zakładając, że masz już zdefiniowaną „aplikację” w innym miejscu):
Dodaj przycisk „otwórz” i odpal.
Teraz możesz dodać dowolną dodatkową klasę lub po prostu zmienić rozmiary szerokości / wysokości w razie potrzeby.
Następnie umieściłem go w dyrektywie opakowującej, która od tego momentu powinna być trywialna.
Twoje zdrowie.
źródło
Rozwiązałem problem za pomocą rozwiązania Dmitry Komin, ale z inną składnią CSS, aby działało bezpośrednio w przeglądarce.
CSS
JS jest taki sam:
źródło
źródło
Jeśli chcesz po prostu wybrać domyślny duży rozmiar, możesz dodać `` modal-lg '':
źródło
Użyj maksymalnej szerokości w oknie modalnym dla kątowego 5
i użyj windowClass zgodnie z zaleceniami innych, np .:
Ponadto musiałem umieścić kod css w global styles> styles.css.
źródło