Quick-Tip: Show Modal Popup after Time Delay

This article explains how to use JavaScript to display a modal window after a short delay, a technique sometimes used for calls to action or advertising. The author cautions against overuse, as it can negatively impact user experience.

The example uses the Colorbox plugin (requiring jQuery) and setTimeout() to trigger the modal after a specified delay (in milliseconds). The article emphasizes accessibility, suggesting focusing on the modal upon opening and restoring focus to the previous element upon closing. To improve usability, it recommends showing the modal only once every few hours or days, using cookies to track display.

Implementation Details:

The code incorporates:

• jQuery and Colorbox: For modal window creation and management. The article provides code snippets for including these libraries via CDNs.
• setTimeout(): To control the delay before the modal appears.
• $.colorbox(): To directly display the Colorbox modal, specifying HTML content, class names for styling, and dimensions.
• onComplete and onClosed events: To handle focus management (using the focus() method) and restore focus after closing.
• js-cookie: For setting and checking cookies to control the frequency of modal display.

The article includes a complete, working example on CodePen, demonstrating how to set a cookie to limit display frequency and manage focus. It also addresses common questions regarding time delays, browser compatibility, and alternative methods. The FAQ section covers various aspects of implementing timed modal popups, including the use of Bootstrap and clearing timeouts.

The above is the detailed content of Quick-Tip: Show Modal Popup after Time Delay. For more information, please follow other related articles on the PHP Chinese website!