Ändern Sie den modalen Dialog im Bootstrap dynamisch
Ich habe ein Modal Popup (Bootstrap), das Inhalt basierend auf der Benutzerauswahl anzeigt
Dies ist der JavaScript-Code, den ich verwendet habe, um nach der Benutzerauswahl zu suchen
%Vor%- Der erste Fall hat eine Tabelle, die innerhalb des modalen Popups angezeigt werden soll, aber die Tabelle geht über das modale Fenster hinaus (es gibt ein Problem mit der Breite des modalen Fensters, aber die
table-responsivescheinen zu funktionieren) Aber Wenn ich die Größe des Browsers an die Breite des Tablets anpasse, ändert sich die Größe der Tabelle / des Modales automatisch, um einander anzupassen. - Die Breite des 2. und 3. Falles des Modals scheint gut zu funktionieren.
Dies ist der Code für das modale Fenster, das aufgerufen wird
%Vor%-
Vollbildbrowser
-
Resized Browser
6 Antworten
Standardmäßig legt boottrap die Breite des .modal-Dialogs auf 600px (große Bildschirme über 768 px) oder auto (kleine Bildschirme) fest. Der folgende Code überschreibt dies:
%Vor%(basierend auf: Ссылка )
Um es dynamischer zu machen, müssen Sie die Breite (jQuery width () oder innerwidth ()) Ihrer Tabelle berechnen und die Breite des modalen Dialogs entsprechend einstellen.
Siehe: Ссылка
Wenn Sie display: table; innerhalb des div setzen, wird das Modal entsprechend angepasst. Mein Modal ist ziehbar und ändert sich nicht, wenn Sie die Größe des Browsers ändern, aber dies ist die einzige praktikable Lösung, die ich für dynamische Modalgrößen gefunden habe.
Ich hatte das gleiche Problem und stellte fest, dass das Problem nicht das Modal selbst war. Ich fügte jedem Element innerhalb des CSS eine ID hinzu und via CSS fügte einfach eine Breite von 100% zu allen hinzu.
Es hat für mich funktioniert.
Tags und Links javascript css twitter-bootstrap-3 modal-dialog