Вступление
Определение модального окна:
«Модальное окно - это графический элемент управления, подчиненный главному окну приложения. Модальное окно создает режим, который отключает главное окно, но сохраняет его видимым, с модальным окном в качестве дочернего окна перед ним ».
Рабочий процесс создания модального окна:
Добавление модального обратного вызова
Код обратного звонка:
Модальный код, который вы можете скопировать и вставить в свое приложение Dash для создания модального окна в своем приложении Dash:
Применение CSS
Вам понадобится правильная таблица стилей, чтобы модальное окно располагалось по центру окна. Есть два варианта. Самый простой из них:
- Добавляем css со строкой:
app = dash.Dash(external_stylesheets=[dbc.themes.BOOTSTRAP])
2. Немного более сложный, но лучше настраиваемый, состоит из копирования кода css-кода с желтым акцентом для модального окна в этой ссылке и вставки его где-нибудь в вашем CSS-файле, который должен находиться в папке assets в вашем проекте Dash. папку (или вам нужно создать или скопировать ее из Интернета).
Укладка
После определения имени идентификатора вашего модального окна вы можете выбрать один из множества различных настроек:
id="modal", # Give the modal an id name is_open=False, # Open the modal at opening the webpage. size="xl", # "sm", "lg", "xl" = small, large or extra large backdrop=True, # Modal to not be closed by clicking on backdrop scrollable=True, # Scrollable in case of large amount of text centered=True, # Vertically center modal keyboard=True, # Close modal when escape is pressed fade=True, # Let the modal fade instead of appear.
Изменение размера модального окна требует дополнительного шага, корректировки модальных свойств с помощью строки стиля:
id="modal", # Give the modal an id name
is_open=False, # Open the modal at opening the webpage.
size="xl", # "sm", "lg", "xl" = small, large or extra large
backdrop=True, # Modal to not be closed by clicking on backdrop
scrollable=True, # Scrollable in case of large amount of text
centered=True, # Vertically center modal
keyboard=True, # Close modal when escape is pressed
fade=True, # True, False
style={"max-width": "none", "width": "50%"}
И корректировка модального тела dbc с помощью стилевой линии:
dbc.ModalBody(
html.Div(children = "your modal here"),
style={"height": "30vh"}
)
vh обозначает высоту области просмотра. Вы можете увидеть высоту области просмотра по этой ссылке:
Tryit Editor v3.6
Если вы нажмете кнопку« Сохранить , ваш код будет сохранен, и вы получите URL-адрес, которым можете поделиться с другими. www. w3schools.com »
Как выглядит конечный результат:
