7.24. Bootstrap5 modal box

发布时间 ： 2025-10-25 13:35:32 UTC      

Page Views: 9 views

A Modal is a child form that overrides the parent form. Typically, the goal is to display content from a separate source, and there can be some interaction without leaving the parent form. Sub-forms can provide information exchange and so on.

7.24.1. How to create a modal box

The following example creates a simple modal box effect:

Example

7.24.2. Add Animation

Use .fade class can set the effect that the modal box pops up or closes

Example

7.24.3. Modal frame size

We can add .modal-sm class to create a small modal box .modal-lg class can create a large modal box.

The size class is placed in

of the element .modal-dialog after class:

Example-small modal box 

<div class="modal-dialog modal-sm">

Example-large modal box 

<div class="modal-dialog modal-lg">

Example-extra large modal box 

<div class="modal-dialog modal-xl">

Full screen display

Use .modal-fullscreen class allows the modal box to be displayed full screen:

Example-full screen display 

<div class="modal-dialog modal-fullscreen">

Use .modal-fullscreen-*-\* class can control the size of the full-screen display:

Class

Description

.modal-fullscreen-sm-down

Full screen display below 576px size

.modal-fullscreen-md-down

Full screen display below 768px size

.modal-fullscreen-lg-down

Full screen display below 992px size

.modal-fullscreen-xl-down

Full screen display below 1200px size

.modal-fullscreen-xxl-down

Full screen display below 1400px size

7.24.4. Mode frame center display

Use .modal-dialog-centered class can set the horizontal and vertical orientation of the modal box to be centered:

Example 

<div class="modal-dialog modal-dialog-centered">

7.24.5. Modal frame scroll bar

By default, if the modal box contains a lot of content, the page automatically generates a scroll, and the modal box scrolls as the page scrolls:

Example 

<div class="modal-dialog">

If we just want to set a scroll bar in the modal box, we can use the .modal-dialog-scrollable class:

Example 

<div class="modal-dialog modal-dialog-scrollable">
文章链接 ： 7.24. Bootstrap5 modal box
Web框架  946

《地理信息系统原理、技术与方法》  97

最近几年来，地理信息系统无论是在理论上还是应用上都处在一个飞速发展的阶段。 GIS被应用于多个领域的建模和决策支持，如城市管理、区划、环境整治等等，地理信息成为信息时代重要的组成部分之一； “数字地球”概念的提出，更进一步推动了作为其技术支撑的GIS的发展。 与此同时，一些学者致力于相关的理论研究，如空间感知、空间数据误差、空间关系的形式化等等。 这恰好说明了地理信息系统作为应用技术和学科的两个方面，并且这两个方面构成了相互促进的发展过程。

WEB基础  289