What Is a Modal and When Should I Use One?

Any experience on a website is like a mosaic of smaller design elements and decisions. Here’s one you’ve likely encountered: You’re browsing a site, and click some button. Immediately the page fades and a popup appears on your screen displaying some message or prompting an action, like signing up for an email list or downloading a content offer.

也许您很高兴看到这个弹出窗口，或者您感到惊讶和困惑。但是，无论您的反应如何，这个窗口肯定引起了您的注意。在web designterms, this type of display is called a模态.

情态动词的目的可以总结为一个词: focus. If you need visitors to focus on something simple, a modal window is one of the most effective means to do so. Users must either close the modal, or complete a specific action within it (e.g., reading a message and clicking “OK”, filling out a form, etc.).

Here’s a simple example from theNew Yorker. This modal prompts us to subscribe to their newsletter.

Image Source

模式在设计师和用户之间两极分化。许多人发现自己快速引起人们注意重要事物的能力的价值，而另一些人则认为它们是对用户体验的不受欢迎的中断。

在实践中，这完全取决于模态是否精心设计和有目的。正确完成时，它们可能是对您的用户和您的数字的有用技术：根据recent study of nearly 2 billion modal popups，最佳10％最佳表现的转换为9.28％。

模态的好处

除了引导焦点外，模式比其他显示元素提出了其他好处。

简单

模态使事情变得简单。一切都停留在一个选项卡中，帮助访客与模式出现之前的工作保持联系。

能见度

由于模式出现在用户的活动选项卡中，因此您可以确定会看到它。相反，如果提示出现在新窗口中，则用户可能会错过它，或者在被烦人的广告弹出窗口调节后本能地关闭新窗口。

Flexibility

Modals also help preserve page space by displaying featured media, like images or videos, in a灯箱.

模态与无模型

We call this type of element “modal” because it introduces a secondary “mode” — or user interface — to the web page on which it appears. A modal window disables most of the page and requires users to focus on a specific window before continuing. Web designers call the modal window the “child” window and the rest of the page the “parent” window.

The opposite of a modal element is a “modeless” element, one which does not disable the parent window. Users can always interact with parent content while a modeless element is open. Examples of modeless elements include a dropdown menu, side panel, or a popup element that still lets users click on other page elements.

Modal vs Pop Up

尽管模态和弹出式UP具有非常相似的功能，但两者之间的差异归结为他们所需的注意力：模态不允许您与页面上的其他元素进行交互，这需要对用户立即采取行动。相比之下，如果用户选择不与弹出窗口进行交互，则可以自由地继续与站点进行交互，而弹出窗口则保留在屏幕上，直到用户与之互动。这是因为弹出窗口是无调设计的。

When Are Modals Used in Web Design?

Modal windows are effective any time you need users to see or do something specific. They typically (but not always) appear after some trigger event like a button click, scroll event, or some exit intent. The most common uses of modals in web design include warnings, alerts, confirmations, forms, media displays, and multi-step processes.

警告，警报和确认

For those times when a user真的should see something, modal windows are excellent at directing attention. A modal can contain an alert about a significant event or error, a warning about the consequences of some action, or confirmation of a completed process. For example:

Image Source

仅将模态用于最关键的消息。例如，积极防止所需操作完成的错误（例如，“由于服务器错误，我们无法完成您的请求。请刷新页面并重试。”）和无法恢复的操作（例如您确定要继续吗？”）两个是模态的合理原因。“ cookie策略”警报，不是很多 - 将其保存在无模型通知窗口或栏中。

形式

If a process on your website requires user-submitted information, you can place a form inside a modal window. You’ll see this often as an alternative to a dedicated page for login/signup, or one that promotes an email newsletter, content offer, or discount code.

许多网站，例如波士顿环球报, restrict their content to members only, and this can be signaled to non-members via a modal:

Image Source

通常，这种类型的模式的触发因素是单击CTA或单击其他按钮，但是在滚动事件后，网站扔模态也很常见。无论您认为这个触发因素太分散了，都取决于您，但是如果他们认为这无关紧要，他们会为此而感到困扰。

Media Displays

Media often supports the main content of a webpage and sets the tone for the browsing experience. However, if an image gallery or video serves as a focal point on your site, a modal window lets visitors view it in isolation without needing to open it in another page.

For example, a user may click a thumbnail on the parent page, which opens up a modal for a gallery of related images, easily navigable with arrow buttons on both sides of the window. This implementation is effective for product and portfolio displays in particular.

A thumbnail can also open a video modal, which displays the video like its own little theater, then closes once the video completes. Internet service provider斯塔尔y’swebsite information page lists a few videos which present this way:

Image Source

使用模式显示媒体的另一个好处是空间效率。媒体倾向于占据宝贵的页面空间，但使画廊或视频播放器以较小的缩略图访问可以节省有价值的房地产。

Multi-Step Processes

要在您的网站上进行更长，更耗能的操作 - 创建用户配置文件，注册服务或完成工具设置 - 请考虑将每个步骤分为自己的模式窗口，以使体验更易于管理。该技术在软件应用程序中以“向导”或“安装程序指南”的形式bob电竞官方下载常见。进度应在窗口中显示为条，一系列小点，数字或其他指标。

Pinterest在他们的帐户创建过程中做得很好。注意顶部的进度指示器。

Image Source

模态在整个网络上都是如此普遍，您的访问者可以从设计毫无意义或设计不佳的情况下讲出有用的模式。通过坚持模态窗户设计的这八种最佳实践，请确保您的模式是高质量的：

1.有意和不经常使用模式。

Modals are disruptive by design. They tend to appear unexpectedly in the flow of the browsing experience, and always shift focus away from their parent window. This is a high cost for the user, so modals should always assist the user in their goals, not obstruct them.

To keep visitors from becoming annoyed with your site, only deploy modal windows when you absolutely need to, and only if they assist the user with their primary goal. Anything less, and users might forget their original goal and grow frustrated.

以下是一些常见模态用途的最佳实践：

• Warnings and Alerts- 只有关键错误和永久操作才能促使模态显示。
• 形式- 坚持那些收集所需信息的人，或者至少可以显着改善他们在您的网站上的经验。多步模式过程中的所有步骤都应与用户的最终目标高度相关。
• Other Elements- 对于任何不符合条件的交互式元素或步骤，请改用无调显示。

2. Deactivate all background elements.

为了有效地将所有注意力集中在模态上，所有背景元素必须在儿童窗口后面的视觉和功能上逐步淘汰。您可以这样做：

• Visual Effects- Modals typically blur and/or darken most or all parent elements. This gives the impression that the modal window sits above the other content. some drop shadow around the modal can also create this effect.
• Deactivating Functionality- Ensure that no page element outside the modal window is clickable or selectable via the keyboard, and consider disabling scrolling as well. Any extra functionality from the parent page will send mixed signals about the purpose of the modal.

另一个重要的说明：由于模态使所有其他页面内容都无法访问，直到关闭，因此用户需要在模态窗口本身中提供所有完成模式的信息。用户不需要参考父母内容来解决模式 - 任何需要此切换的任务都更适合无调显示。

3. Write clear instructions and button text.

To help users quickly adjust to the modal display and understand why it’s there, make all text as brief and clear as you can. All modals should include title text which states the intention of the modal or the action required. Write your按钮文字and other action prompts to be concise and intuitive as well.

4.给用户一个。

Every good modal window allows at least one action, the option to close it. Convention says that the window should disappear after a user presses the escape key, or clicks an “X” symbol or “Close” text in the top left or right corner of the modal window.

当用户单击模式外时，您还可以选择关闭窗口，并考虑将“取消”按钮在模态中作为“继续”按钮的替代方法。

5.适当地尺寸的模态窗口。

模态应以图层的形式出现在父窗口的顶部。使它太大，用户可能会认为模态是一个全新的页面，太小了，用户可能会将其误认为是广告。

A good guideline is to restrict the modal window to at most 50% of the browser window width, and roughly the same for height, though the exact dimensions will vary based on what you place in the modal.

6.引入并关闭模态，并淡出淡出。

在clude a transition effect to ease the switch from parent window to child window. A brief fade-out of the background content and fade-in of the modal window will work well in nearly any scenario — a more eventful transition (e.g. a slide-in) or no transition might seem jarring to some.

Back to our斯塔尔yexample, note how the video modal quickly but smoothly fades into view, while background contents are dimmed:

Image Source

7. Limit modals on mobile.

我描述的所有设计功能都适合桌面屏幕，但是移动设备是另一回事。减小的屏幕尺寸使得在窗口上看起来更难，而不会显得太大或太小。

您可能在普通站点上放置模式，而是考虑添加一个无模式元素或将模态内容完全放在新页面上。如果您希望在移动网站上模态，请测试以确保它们具有响应性，清晰度和易于使用的方式。

8. Design your modals for accessibility.

我已经谈到了一对Web可访问性pointers in this list — here are some common practices to make your modals usable for everyone:

• Every clickable action in the modal should also be possible with the keyboard. The escape key should close the window, and the tab and enter keys can be used to select options.
• 只要模态在观察时，键盘就不应访问模态之外的所有其他元素。
• The modal window should visually contrast with the background page.
• Transitions into and out of the modal should be smooth and non-flashy.
• 任何图像，视频或其他媒体项目都应包括描述性替代文字.
• All text and media can be interpreted by screen readers and other assistive technologies.

How to Implement Modals in CSS

要在您的网站上添加一个基本的模式窗口，一个选项是单独使用CSS和HTML。我们在本指南中涵盖的大多数设计因素都可以通过a bit of CSS know-how.W3Schoolsprovides a basic but useful code template to get started with the CSS method, or you can use a free template fromFree Frontend或者Material Design for Bootstrap.

但是，您决定实施模态，请记住将它们的用途限制在仅基本情况下。可以偶尔要求用户的关注，只要它最终达到了最终目标并提供足够的价值来证明短暂的中断。对于每种模态，都可以了解其在访客旅程中的目的，并坚持我们的设计和功能最佳实践。

Editor's note: This post was originally published in September 2020 and has been updated for comprehensiveness.