This is the 26th day of my participation in Gwen Challenge
“Bootstrap5 zero foundation to master” my old liu original, strive to update a section every day.
26.1 Working principle of Bootstrap5 Modal spring frame
Use Bootstrap’s JavaScript mode plug-in to add dialog boxes to the site for light boxes, user notifications, or completely custom content.
- Interactive Windows are built with HTML, CSS, and JavaScript. They sit on top of any other content in the file and remove the scroll from the body so that the content of the interactive window scrolls.
- Click on the Interactive window “Backdrop” to automatically close the interactive window.
- Bootstrap supports only one interactive window at a time. Nested interactive Windows are not supported because we consider nested interactive Windows to be a poor user experience.
- The interactive window uses Position: Fixed, which is a bit special for rendering. Place your interactive window HTML at the top of the page as much as possible to avoid potential interference from other elements. You might have a problem when you put a modal in another fixed element.
- Using interactive Windows on mobile devices comes with some caveats due to Position: Fixed.
- Based on the way HTML5 defines semantics, autofocus HTML attributes have no effect on Bootstrap interactive Windows. To achieve the same effect, use some custom JavaScript: the Autofocus HTML Attribute
26.2 Complete example
26.2.1 Complete Example
Toggle dynamic window rendering by clicking the button below. It slides down from the top of the page and fades in. Click the close button or click the background area to pop up the window to close.
<! doctype html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="keywords" content=""> <meta name="description" content=""> <link href=".. / bootstrap5 / bootstrap. Min. CSS "rel =" stylesheet "> < title > modal dialog < / title > < / head > < body > < div class =" container "> <! -- Button trigger modal --> <button type="button" class="btn btn-primary" data-bs-toggle="modal" Data-bs-target ="#exampleModal"> </button> <! -- Modal --> <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h5 Class ="modal-title" ID ="exampleModalLabel"> </ H5 > <button type="button" class=" bTN-close "data-bs-dismiss="modal" Aria -label="Close"></button> </div> <div class="modal-body"> </div> <div class="modal-footer"> <button type="button" class=" BTN bTN-secondary "data-bs-dismiss="modal"> Close </button> </button> </div> </div> </div> </div> </div> </div> </div> </div> </div> /bootstrap5/bootstrap.bundle.min.js" ></script> </body> </html>Copy the code
26.2.2 Static Background
When the background is set to static, the interactive window does not close when the background is clicked. Data-bs-gorgeous =”static” data-bs-keyboard=”false”
Take the code in the 26.2.1 example
<div class="modal fade" id="exampleModal" tabindex="1" aria-labelledby="exampleModalLabel" aria-hidden="true">
Copy the code
Replace with
<div class="modal fade" id="exampleModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="1" aria-labelledby="exampleModalLabel" aria-hidden="true">
Copy the code
It looks the same from the outside, except when you click on the background, the popup is no longer closed.
26.3 Scroll long content
26.3.1 Using the Browser Scroll bar
By default, when the user’s dynamic Windows become too long, they scroll independently of the page itself, and the vertical scroll bar is enabled on the browser.
<! doctype html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="keywords" content=""> <meta name="description" content=""> <link href=".. / bootstrap5 / bootstrap. Min. CSS "rel =" stylesheet "> < title > modal dialog < / title > < / head > < body > < div class =" container "> <! -- Button trigger modal --> <button type="button" class="btn btn-primary" data-bs-toggle="modal" </button> <div class="modal fade" ID ="exampleModalLong" tabindex="-1" aria-labelledby="exampleModalLongTitle" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div Class ="modal-header"> <h5 class="modal-title" id="exampleModalLongTitle"> class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> <p> Generation Z is becoming the new force of global consumption. This batch of native mobile Internet was born in 1995-2009, in the rapid economic growth, multi-culture collision, information unprecedented prosperity in the world, formed both tolerance and critical aesthetic tendencies, their personal interest and likes and dislikes as the foundation of the social principle, leading to a new generation of social "tribes" and the "island" tendency. </ P > < P > This new digital behavior, led by Gen Z, is dramatically reshaping the global mobile app landscape, bringing new possibilities to the long-dormant mobile social app ecosystem. </p> <p> For a long time, the core reason for wechat to hold the position of "social hegemony" is that it cleverly moves the social ecology of acquaintances to online and realizes promotion. In other words, wechat solves the problem of survival. However, today's young people have more complex needs for companionship, expression and personal identity, and need to find other ways to achieve it. This demand is reflected in the social market, bringing a new generation of personalized social products. </ P > < P > For example, Soul, a social product launched less than five years ago, is rapidly gaining market share among young people. Soul has reached 10 million daily active users, up 94.4% year on year, and 73.9% of its DAILY active users are Gen Z. It also reached 33 million MAU with its new social gameplay. What is more noteworthy is that since July 2020, the average growth rate of users has remained above 105%. According to Data from Tencent's Think Tank, Soul ranks among the top three among the post-1995 generation in terms of penetration rate. On the Target Group Index (a measure of user preference), Soul has reached 127 among the post-1995 generation, well above the average of 100, reflecting its popularity among the post-1995 generation. </ P > < P > The growth path of Soul does not rely on the transfer or mapping of the existing relationship chain, nor does it attract fans through KOL or head anchors. Instead, the platform is completed with cold launch. There is no precedent for such a form at home and abroad. How did this young social platform grow? How does Soul ensure retention and activity without introducing offline relationships? </ P > < P > A general survey of the global social networking industry shows that there are three types of social products from the perspective of the closed-loop relationship chain. </p> <p> The first is to copy the existing external relationship chain into social products, mainly the mapping of offline relationships such as mobile phone contacts and email. Facebook, wechat and QQ all belong to this category. The second one is based on geographical location, such as "nearby people" and "same-city friends". The previous generation of stranger social products mainly follow this path. The third is aggregation by topic, content or interest, such as the recent explosion of Clubhouse. </p> <p> But Soul is none of the above. When entering Soul for the first time, users create a new identity, take a "Soul test," and then personalize it. Based on this virtual online persona, users can express themselves, learn about others, explore the world, exchange interests and opinions, gain emotional support and recognition, gain information and quality new relationships from communication. </p> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div> </div> <script src=".. /bootstrap5/bootstrap.bundle.min.js" ></script> </body> </html>Copy the code
26.3.2 Using the Popover scroll bar
You can add modal-dialog-Scrollable to modal-Dialog to create a scrollable body pop-up window.
In 26.3.1 examples
<div class="modal-dialog">
Copy the code
Replace with
<div class="modal-dialog modal-dialog-scrollable">
Copy the code
26.4 Vertically centered
Add modal-dialog-centered to modal-dialog to center the interactive window vertically. This setting is simple, just make the following changes.
<div class="modal-dialog modal-dialog-centered">
Copy the code
And down here is the scroll bar
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
Copy the code
The above example may not be visible because only part of the window is selected in the screenshot. The following two figures respectively illustrate the display effect after the window is raised and the display effect after the vertical center is added.
26.5 Multiple mode boxes switch
Switch between multiple modes, cleverly placing the data-Bs-target and data-Bs-Toggle attributes. For example, you can switch password reset mode in an already open login mode. Note that you cannot open more than one mode at a time. This method simply switches between two separate modes.
<div class="bd-example">
<a class="btn btn-primary" data-bs-toggle="modal" href="#exampleModalToggle" role="button">Open first modalddd</a>
<div class="modal fade" id="exampleModalToggle" aria-hidden="true" aria-labelledby="exampleModalToggleLabel"
tabindex="1">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalToggleLabel">The latest news</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">First message</div>
<div class="modal-footer">
<button class="btn btn-primary" data-bs-target="#exampleModalToggle2" data-bs-toggle="modal"
data-bs-dismiss="modal">Check out the next one</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="exampleModalToggle2" aria-hidden="true" aria-labelledby="exampleModalToggleLabel2"
tabindex="1">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalToggleLabel2">The latest news</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">Second message</div>
<div class="modal-footer">
<button class="btn btn-primary" data-bs-target="#exampleModalToggle" data-bs-toggle="modal"
data-bs-dismiss="modal">Check item 1</button>
</div>
</div>
</div>
</div>
</div>
Copy the code
Today’s course is here, please pay attention to me, timely learning an old Liu original “Bootstrap5 zero foundation to master” section 27 Bootstrap5 pop-up prompt and tooltip component usage, these two components are very single function, usage is also very simple, there are many similarities.
If this article is helpful, please feel free to like it!