Questions tagged [modal-dialog]

Refers to a graphical dialog used to display important information to the user. These dialogs appear above all other content, blocking application flow until user input is received.

Modal windows are commonly used in GUI systems to command user awareness and to display emergency states. On the Web, they are often used to show images in detail.

Frequent uses of modal windows include:

  • Drawing attention to vital pieces of information. This use has been criticised as ineffective because users are bombarded with too many dialog boxes, and habituate to simply clicking "Close", "Cancel", or "OK" without reading or understanding the message.

  • Blocking the application flow until information required to continue is entered, as for example a password in a login process. Another example are file dialogs to open and save files in an application.

  • Collecting application configuration options in a centralized dialog. In such cases, typically the changes are applied upon closing the dialog, and access to the application is disabled while the edits are being made.

  • Warning that the effects of the current action are not reversible. This is a frequent interaction pattern for modal dialogs, but it is also criticised by usability experts as being ineffective for its intended use (protection against errors in destructive actions) due to habituation. Actually making the action reversible (providing an "undo" option) is recommended instead.

See also: and

More info on Wikipedia

11991 questions
72
votes
2 answers

The 'await' operator can only be used within an async lambda expression

I've got a c# Windows Store app. I'm trying to launch a MessageDialog when one of the command buttons inside another MessageDialog is clicked. The point of this is to warn the user that their content is unsaved, and if they click cancel, it will…
roryok
  • 9,325
  • 17
  • 71
  • 138
72
votes
9 answers

Bootstrap 3 with remote Modal

I just started a new project with the new Twitter Bootstrap release : bootstrap 3. I can't make the Modal work in the remote mode. I just want that when I click on a link it shows the modal with the content of the remote url. It works but the modal…
user2707039
  • 760
  • 1
  • 6
  • 8
70
votes
13 answers

How to make a JFrame Modal in Swing java

I have created one GUI in which I have used a JFrame. How should I make it Modal?
om.
  • 4,159
  • 11
  • 37
  • 36
69
votes
10 answers

How to handle "outside" click on Dialog (Modal)?

My box closes when clicking outside of the box making me lose all the input. I want my box to close only when clicking on the cancel button. I am not sure what is making it close when clicking outside. Any help? I am using @material-ui/core …
rszaman
  • 705
  • 1
  • 5
  • 12
69
votes
13 answers

Custom dialog on Android: How can I center its title?

I'm developing an Android application. How can I center the title for a custom dialog that I'm using?
VansFannel
  • 45,055
  • 107
  • 359
  • 626
68
votes
6 answers

Using Bootstrap Modal window as PartialView

I was looking to using the Twitter Bootstrap Modal windows as a partial view. However, I do not really think that it was designed to be used in this fashion; it seems like it was meant to be used in a fairly static fashion. Nevertheless, I think…
KWondra
  • 1,235
  • 2
  • 13
  • 18
67
votes
12 answers

Javascript to stop HTML5 video playback on modal window close

I've got a html5 video element on a modal window. When I close the window the video continues to play. I'm a total newbie to JS. Is there an easy way to tie a video playback stop function to the window close button? Below is my html…
user747836
  • 671
  • 1
  • 5
  • 3
66
votes
30 answers

Bootstrap modal not displaying

I've copied and pasted the example code from twitter bootstrap to create a basic modal window in my Rails 3.2 app:
66
votes
5 answers

How to get Twitter Bootstrap Modal's invoker element?

I have got a a element for invoking modal: Launch Modal And, say this is my modal:
62
votes
3 answers

ASP.NET MVC modal dialog/popup best practice

I am looking for the most standard way to achieve modal dialogs in ASP.NET MVC. An example of what I am trying to do is when I select an item from my "list" page, I want the "details" page to be a popup over the list and NOT a new page. I'm not…
Brian David Berman
  • 7,514
  • 26
  • 77
  • 144
62
votes
5 answers

Set width and height to React-native modal

I can't configure modal height and width using style property. Is there any other way to set modal height and width?
TK-95
  • 1,141
  • 2
  • 10
  • 21
61
votes
24 answers

Bootstrap close modal not working

I have two button here that are being used to close the modal. The first is the close icon and the other one is cancel button, both use data-dismiss to close the modal. However, both of them are not working. I am using the same code for another…
NoorUllah
  • 621
  • 1
  • 5
  • 7
61
votes
11 answers

Twitter Bootstrap: Print content of modal window

I'm developing a site using Bootstrap which has 28 modal windows with information on different products. I want to be able to print the information in an open modal window. Each window has an id.
MattSull
  • 5,514
  • 5
  • 46
  • 68
60
votes
11 answers

Showing a Google Map in a modal created with Twitter Bootstrap

I'm trying to insert a Google map into a modal using Twitter Bootstrap. The modal shows up with the shape of the map present, but only part of the map is displayed, the rest is gray. Upon resizing the screen the map always shows up correctly,…
Eels
  • 625
  • 1
  • 6
  • 8
59
votes
8 answers

jQuery UI Dialog window loaded within AJAX style jQuery UI Tabs

The AJAX tabs work perfectly well. It's pretty straightforward with that part. However, getting the AJAX UI Dialog modal window to trigger off of a link has been unsuccessful. Any help in this would be appreciated.
None