Questions tagged [modal]

A shorthand way of saying "modal window": a panel that appears over and disables the main content, requiring user interaction with it.

Filter by
Sorted by
Tagged with
27 votes
5 answers
7k views

What is better: to have a modal open instantly and then load its contents, or to load its contents and then open it?

Let's say you have a button. When you click it a GET request is fired for some data (for this example assume that the data cannot be prefetched). Then a modal opens and displays that data in a pretty ...
Ryan Peschel's user avatar
21 votes
7 answers
6k views

Intuitive dialog for choosing whether to close and lose changes or keep editing

It's a pretty simple use case. I have a modal with an editable form. If the user enters something into the form and then tries to cancel, we want to warn them they have unsaved changes, which they'll ...
panta82's user avatar
  • 353
21 votes
8 answers
7k views

Close button position: corner or inside?

This is the modal dialog for the admin page. We had a discussion about the close button position. Which one do you think is better? A is more common and can be seen in many great web apps (Figma, ...
yellingbytes's user avatar
18 votes
3 answers
6k views

Stripe Checkout - Modal on desktop and new tab on mobile [closed]

Stripe Checkout claims to be fully optimized to drive payment conversions. Their solution for desktop involves a modal, so that the user doesn't have to leave the merchant's domain. On mobile ...
Shailesh Tainwala's user avatar
15 votes
5 answers
4k views

Laymen's description of "modals" to clients

Our company runs about 1,000 websites for various clients, and we just implemented a feature that will allow them to create their own modals in a "back end" that we've created for them. ...
Zak's user avatar
  • 253
15 votes
5 answers
20k views

Modal or new Page?

I have 7 products. The site has a lot of content(text) pages. At the bottom of each content page I want to list my products as thumbnails. Version A: Click on a thumbnail opens a modal with the ...
marcelgro's user avatar
  • 333
11 votes
3 answers
5k views

Are modal dialogs WCAG compliant?

Are modal dialogs WCAG compliant? I understand that pop-ups of any kind do not meet WCAG requirements, and I assume this includes modal dialogs? For example, I am working with a Primefaces component,...
Fuzzy Analysis's user avatar
8 votes
5 answers
2k views

Modal, Slide In or New Page?

I'm currently putting together a page that consists of a grid of offers (say 24). The data I want to display along with a pic means that each offer will take up approx 200-300px square - not ...
John's user avatar
  • 81
8 votes
3 answers
707 views

Do good UX guidelines exist against little JS windows inside the browser

I encounter a lot of web applications that essentially implement a small windowing system inside the browser. On you web page there exist a number of little boxes that look like windows, which can be ...
AgilePro's user avatar
  • 1,527
7 votes
2 answers
5k views

Substitute for a pop-up modal on mobile

A pop-up modal on my website shows information. In the mobile version of the page, what could be a good replacement for a pop-up window? I tried making the modal pop-up responsive, but the content ...
Sooraj's user avatar
  • 2,094
5 votes
3 answers
2k views

Should closing the dialog clear its fields?

I identified as the most preferrable strategy for user not to lose their data implementation of confirmation/discard dialog when exiting original one. I expect a few more form dialogs to emerge in ...
optimista's user avatar
  • 151
5 votes
1 answer
9k views

Full screen modal vs normal modal?

What are the advantages of using full screen vs normal modal? I've seen sites like Airbnb & Slack use white full-screen overlay. How does it impact usability? Are there any advantages for using ...
NB4's user avatar
  • 2,491
5 votes
3 answers
6k views

Display Modal over another Modal, it's really a sin?

I'm currently working in a web app for technology transfer offices and I've been avoiding at all costs to display a Modal window over another one that's already open. To give more context, there is ...
Stefano Fenzo's user avatar
4 votes
2 answers
175 views

What to display in a modal window when there is no content?

We have a modal window that should always have content when opened via a mouse click on a web page, however, it's possible that since it's delivered dynamically from a database, it may not be ...
user avatar
4 votes
1 answer
5k views

Best size for modal

I am designing a modal for enterprise application. What is the optimal size for modal width and height. I need to design one for small medium and large.. Is there a resource or user research done ...
donaline's user avatar
4 votes
2 answers
799 views

Autosave option in a modal dialog with Save & Cancel buttons

Scenario - A modal dialog where a user can type in anything (basically, Notes) with Save & Cancel buttons present, and Auto Save implemented. Auto Save has a purpose - it will avoid the messy ...
Siva G's user avatar
  • 41
3 votes
1 answer
768 views

Is it a good practise to load contents outside of modal?

There is a dropdown and date-picker inside a modal and the size of the modal is small, so when we click on the date-picker the widget is overflowing the modal. Is this a good practise? or should we ...
uttham's user avatar
  • 1,050
3 votes
3 answers
2k views

Placement of a modal

Currently, I am going into an application where there was a decision made to have modals slide into the screen from the right but stay snapped to that right window border. From experience in other ...
Nick Rucci's user avatar
3 votes
2 answers
3k views

Is it necessary to have a close icon and close button on a modal?

I went through the search here and found a similar question from 10 years ago about Windows modals. This is just a regular agnostic modal. Is there a best practice with this case?
keano12's user avatar
  • 63
3 votes
3 answers
838 views

Modal button positioning on mobile

I am designing a design system for my company and am currently looking at designing the modals and dialogues for both desktop(tablet too) and mobile. I have placed the primary action to the bottom ...
Emily Lawes's user avatar
3 votes
3 answers
6k views

Is a double modal pop up a concern?

What I mean is that say you select something on a webpage. It serves you a modal pop-up form to complete. On this form is a date-picker which would serve another full screen (on mobile) modal pop up. ...
Calum's user avatar
  • 494
3 votes
7 answers
642 views

Best practice when creating new element in two dropdowns on the same form and in a modal

I am working on an app that has a side modal. When creating a new lead the side modal opens and you are facing a form that contains the elements in the image below. When you type inside the company ...
Chris's user avatar
  • 4,538
3 votes
1 answer
455 views

Is modal expansion a user friendly pattern?

I have a problem whether to have everything in one modal, or have one after the other. Any help would be appreciated. Please pic the option that makes sense. Any other solution would be awesome too :)
Karthik Rajendran's user avatar
3 votes
1 answer
5k views

Accessible web modals: Show or hide the "X" (close icon) at the upper right?

How do I handle the "X" at the upper right corner of my web site modals in order to make the modal as accessible as possible for users with screen readers but also for keyboard users? As I see it, ...
Ilias Bennani's user avatar
3 votes
1 answer
254 views

When should input fields be cleared in modals, if at all?

I have an invoice page with a button to make a payment. The payment button triggers a series of modals for collecting user payment info (credit card/check details, billing details, payment ...
jeffjenx's user avatar
  • 133
3 votes
1 answer
2k views

Sidebar modal - pros & cons?

Do slide-out modals work well in your experience? Our requirements are to present deeper, specific content to users without taking them out of a flow, so linking to another page is not being ...
endymion1818's user avatar
3 votes
3 answers
596 views

Modal upon modal best practices - Web App [duplicate]

The product I am working on at the moment is a standalone product but we are creating a web app to replace it. It currently opens modal windows on top of modal windows for the same function i.e ...
itodd87's user avatar
  • 31
2 votes
2 answers
807 views

When displaying an "OK/Cancel" button group that is right-aligned should the main action be on the right?

I am designing an "OK/Cancel" button group on a modal hence this button group is right-aligned. Since this is the case I have placed the main action button "OK" on the right, and ...
MACC's user avatar
  • 195
2 votes
4 answers
2k views

Should I use modal or page if there are multiple of steps?

I was wondering whether to make it a modal or a page. So the process is this: Enter full name and birthdate Answer security questions Upload an ID After uploading an ID, there are 2 pages that ...
Paulo Manlapid's user avatar
2 votes
2 answers
920 views

Is it okay to have a modal window with a button that redirects to another page?

In my case, the information written in the modal window is not directly linked to the button. That is, the button is not some action that the user does after reading the information given in the modal....
Kish's user avatar
  • 2,587
2 votes
3 answers
833 views

Toggle between two modal windows

I have a system where a user can share a task with his coworkers. The system was developed in a way where the share button opens a modal dialog with the option to input details of the user to share it ...
dimshik's user avatar
  • 1,201
2 votes
2 answers
549 views

Change size of modal in wizard experience

I am building a wizard experience to guide a user through a complex setup flow. In the flow, some steps require more space and some require less space. Does it make sense to change the modal size on ...
harshikerfuffle's user avatar
2 votes
1 answer
78 views

Good alternative for popups that show events?

I'm in a team that builds website templates for a wide variety of informative sites. We've had a lot of users asking for popups on the homepage and we've been saying no because it's a bad design ...
sofarsophie's user avatar
2 votes
2 answers
460 views

Edit mode + Side panel/Modal, how to deal with double validation?

I am currently struggling with an edit mode user scenario inside a web application. Context The web application will be used also on mobile, so we can't use “on hover” comportment. 99% of the time, ...
Funkit's user avatar
  • 331
2 votes
1 answer
449 views

What is the best way to add edit and delete buttons to a modal?

I have a task data visualization modal, but I need to add an option to edit or delete these tasks. Where in this modal could I insert buttons to delete or edit?
Cristiano Felipe's user avatar
2 votes
2 answers
802 views

Align width of dropdown menu to?

In the past I ran often into the problem, that I did not know how to decide the width of a dropdown menu. I as a designer don’t mind to just eyeball a good-looking width, but developers would love to ...
VeryCatchy's user avatar
2 votes
1 answer
292 views

Warning/ Information on top of a Modal

I want to give users a warning on a modal that changing one form field has implications on another form field. I am aware of 2 patterns that are used as shown here. I am seeking suggestions on what UI ...
harshikerfuffle's user avatar
2 votes
3 answers
116 views

Should browser page back present modals as well as pages?

Currently, on using the browser back button, our site pages back through not only the pages but any modals used. So if the modals were part of a 'series' (e.g. three consecutive modals to capture ...
lizat's user avatar
  • 21
2 votes
2 answers
1k views

Modal or new Page for product description?

I have a question it's kind of research and I have researched a few before posting but I want direct pros and cons for my concerns thus I am posting this question here. I have a page which has a sort ...
Mr. Pyramid's user avatar
2 votes
2 answers
1k views

modal inside a modal (delete confirmation)

I have a View/Edit button which shows the details ofuser in a modal when clicked. In modal it has Save and delete buttons. When they click on delete button the user will be deleted. Before they delete,...
yer's user avatar
  • 123
2 votes
2 answers
883 views

What are best practices for deciding when to use native iOS UI elements or when to build custom ones?

I know some interactions and content are far too complicated to apply to a default iOS UI element - but when it comes to ones that could go either way, what are the best practices in making a decision?...
Ben Suarez's user avatar
2 votes
1 answer
1k views

Should hitting the ESC key close a modal that has a form?

Typically, when you hit the ESC key, that closes a modal. But if this modal contains a form that the user needs to fill out, that would mean that hitting ESC (sometimes, inadvertently) closes the ...
J Bo's user avatar
  • 1,384
2 votes
1 answer
1k views

How to best handle a modal with multiple tabs and buttons

We have a modal that is used for an action to Add an item and Edit an existing item. It also has a button to delete the item all together. I am trying to determine the best way to handle the button ...
husseinSD's user avatar
  • 106
2 votes
1 answer
64 views

Need help with showing information in a limited space

Well, it is my first time seeking help for user experience design, so pardon me as I am not accustomed to the proper rules. I have an information card which shows a thumbnail for a video and below it,...
Usama Jawed's user avatar
2 votes
1 answer
710 views

Filters on mobile e-commerce

I’ve been asked to produce a research on mobile filters. We do have e-commerces that are adaptive. Any native app is going to be developed over the short term. I’ve done benchmarking and come up with ...
Elisa Reinaudo's user avatar
2 votes
1 answer
132 views

Which one is the best for the user, button or icon for the "Close" in dialog/modal?

I'm designing a dialog/modal for my mobile app, which one will be the best practice for "close" on the dialog? 1."Close" button on the bottom left after the content 2."X" on the top right corner
Rob H. Yamin's user avatar
  • 1,779
2 votes
1 answer
2k views

Fullscreen Modal Window Usability Issues [closed]

There is a new trend of fullscreen modals used in web applications. Please refer a sample in the below link (Click the green colored "See it in action" button): https://noreiller.github.io/bootstrap-...
krishnajay's user avatar
2 votes
3 answers
519 views

What are the benefits of using modals on desktop?

I see a lot of sites use modals for actions such as posting content (often on social sites). For example, Twitter and Tumblr both use modals, but Facebook does not. What is the benefit of using a ...
Ben Suarez's user avatar
2 votes
1 answer
567 views

Pros and Cons for using Modals? [closed]

What sound the pros and cons for using Modal? Whereas the webapp is responsive and will be displayed on mobiles.
MPossel's user avatar
  • 81
2 votes
1 answer
76 views

Is it a good experience if we use three modals in a row?

I would like to be sure if it is a good experience for the user when, for example, you update your password and then the user selects the "Save changes" button; this action appears in the ...
Eloy Herrera Salazar's user avatar