Скачать или смотреть Creating a Bootstrap Auto Hide Modal with a Time Indicator

Learn how to create an interactive Bootstrap modal that automatically hides after a specified time while displaying a progress bar to indicate the remaining time.
---
This video is based on the question https://stackoverflow.com/q/68746464/ asked by the user 'Donald Prompt' ( https://stackoverflow.com/u/16632019/ ) and on the answer https://stackoverflow.com/a/68747062/ provided by the user 'amirify' ( https://stackoverflow.com/u/8488702/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: How can I create bootstrap auto hide modal with time indicator?

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
Creating a Bootstrap Auto Hide Modal with a Time Indicator

When building modern web applications, user experience is key. One way to enhance user engagement is by using modals. Bootstrap, a popular front-end framework, simplifies the process of creating modals with its components. In this guide, we will explore how to create a Bootstrap modal that not only auto-hides after a few seconds but also displays a progress bar to indicate how much time is left before it closes.

The Problem

You have a Bootstrap modal that you'd like to automatically close after a specified duration, and you want to visually communicate this timing to your users through a progress bar. This feature can be particularly useful for notifications or alerts, where timely user response is essential.

[[See Video to Reveal this Text or Code Snippet]]

The Solution

To achieve our goal, we will use jQuery along with some CSS. Here’s how to implement the auto-hide modal along with the progress bar.

Step 1: Setting Up the HTML Structure

We start with the modal structure provided in the introduction. It consists of:

A modal caller link to trigger the modal popup.

A modal defined with a unique identifier, a backdrop option, and a duration that indicates how long it stays open (in milliseconds).

Step 2: Styling the Progress Bar with CSS

We need our progress bar to start with a width of 0 and animate to 100% during the modal's open duration. Here’s the CSS you need:

[[See Video to Reveal this Text or Code Snippet]]

Step 3: Implementing the JavaScript Logic

Now, let's write the JavaScript to handle the automatic closing of the modal and updating the progress bar. Here’s the code you should use:

[[See Video to Reveal this Text or Code Snippet]]

Explanation of JavaScript Code

Event Listener: We set an event listener for when the modal is shown (shown.bs.modal).

Retrieve Duration: We get the duration from the modal's data-time attribute.

Animate Width: We use the animate function to gradually change the width of the progress bar to 100% over the specified time.

Fade Out & Reset: After the specified time, we fade out the modal and reset the progress bar width back to 0 for any future calls.

Final Touches

Now, when the modal appears, you'll see the progress bar filling up as the timer counts down. This gives users a visual indication of how long they have before the modal disappears, enhancing their experience on your site.

Conclusion

Integrating an auto-hide modal with a time indicator adds a dynamic element to your web application, keeping users informed and engaged. Utilizing Bootstrap and jQuery makes implementation straightforward. We hope this guide helps you implement this feature effectively!

Feel free to share your thoughts or additional features you'd like to see in your modals in the comments section below!