7.24. Bootstrap5 modal box

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

Page Views: 17 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

Principles and Applications of WebGIS

 37

Web框架

 942

WEB基础

 287

Principles, Technologies, and Methods of Geographic Information Systems

 102

In recent years, Geographic Information Systems (GIS) have undergone rapid development in both theoretical and practical dimensions. GIS has been widely applied for modeling and decision-making support across various fields such as urban management, regional planning, and environmental remediation, establishing geographic information as a vital component of the information era. The introduction of the “Digital Earth” concept has further accelerated the advancement of GIS, which serves as its technical foundation. Concurrently, scholars have been dedicated to theoretical research in areas like spatial cognition, spatial data uncertainty, and the formalization of spatial relationships. This reflects the dual nature of GIS as both an applied technology and an academic discipline, with the two aspects forming a mutually reinforcing cycle of progress.