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
59
votes
11 answers

Getting Error: Object doesn't support property or method 'assign'

I am using this jquery popup plugin from this link on my WordPress site. It's working fine on all browsers but giving the following error on IE11.
pragya rai
  • 611
  • 1
  • 5
  • 3
59
votes
14 answers

jquery-ui Dialog: Make a button in the dialog the default action (Enter key)

In a jquery modal dialog, is there a way to select a button as the default action (action to execute when the user presses enter)? Example of jquery web site: jquery dialog modal message In the example above the dialog closes when the user presses…
fgui
  • 1,564
  • 1
  • 13
  • 14
58
votes
13 answers

Android: How to get a modal dialog or similar modal behavior?

These days I'm working on simulating modal dialog in Android. I've googled a lot, there's much discussions but sadly there's not much options to get it modal. Here's some background, Dialogs, Modal Dialogs and Blockin Dialogs / AlertDialogs: How to…
fifth
  • 4,249
  • 9
  • 45
  • 62
58
votes
5 answers

Passing data to mdDialog

Main listing page has edit button. Which opens details of the edited row. Way-1: Now, if I set "ctrl.parent.q_details.client_location" it is bind with parent listing controller and it works as 2-way binding and automatically changes the values as…
58
votes
10 answers

make bootstrap twitter dialog modal draggable

I'm trying to make bootstrap twitter dialog modal draggable with this jquery plugin: http://threedubmedia.com/code/event/drag#demos but it doesn't work. var $div = $('html'); console.debug($('.drag')); $('#modalTest') .drag("start", function(ev,…
paganotti
  • 5,591
  • 8
  • 37
  • 49
56
votes
4 answers

iOS - How to check if a modal view is present

Is there a way to check if a modal view is present? I'd like to run a method only if a modal view is present. Also, if I have multiple modal views, is there a way to check if a certain modal view is present. I use the following code to present and…
Evan Johnson
  • 1,444
  • 1
  • 14
  • 31
56
votes
8 answers

How to create a React Modal (which is appended to ) with transitions?

There is a modal in this answer https://stackoverflow.com/a/26789089/883571 which is creating a React-based Modal by appending it to . However, I found it not compatible with the transition addons provided by React. How to create one with…
jiyinyiyong
  • 4,586
  • 7
  • 45
  • 88
56
votes
6 answers

How to close all active bootstrap modals on session timeout?

I need to make a call when the user is idle and passes the session time out that will close all Bootstrap modals. The modals being active are dependent on what the user is doing at the time so I would like to do something that's is all…
jeff werner
  • 829
  • 2
  • 7
  • 14
55
votes
6 answers

Autofocus input in twitter bootstrap modal

I have such problem - I need to autofocus some element inside twitter bootstrap modal (after it shows). The tricky part is here - content of this modal is loaded using 'data-remote' (jQuery.load method) from separate HTML file,…
eawer
  • 1,398
  • 3
  • 13
  • 25
52
votes
5 answers

Bootstrap Modal before form Submit

I'm new to Modals, I have a Form and when the user clicks submit, It will show a Modal confirming if the user wants to submit, the modal also contains the user input from the form fields. I searched all over the internet but can't find the right one…
user3651491
  • 713
  • 1
  • 5
  • 6
52
votes
5 answers

AngularJS modal dialog form object is undefined in controller

We have a page that opens a modal dialog with a form like below. However when we hit the controller that should handle the form action, the form object is undefined and I am too much of an Angular newbie to understand why... This is the parent page…
Pete
  • 10,720
  • 25
  • 94
  • 139
52
votes
10 answers

Close dialog on click (anywhere)

Is there a default option to close a jQuery dialog by clicking somewhere on the screen instead of the close icon?
Fuxi
  • 7,611
  • 25
  • 93
  • 139
50
votes
6 answers

Set bootstrap modal body height by percentage

I am trying to make a modal with a body that will scroll when the content becomes too large. However, I want the modal to be responsive to the screen size. When I set the max-height to 40% it has no effect. However, if I set the max-height to 400px…
thraxst
  • 685
  • 3
  • 8
  • 11
49
votes
9 answers

ngx-bootstrap modal: How to get a return value from a modal?

In my Angular 4 app, let's assume that I'm inside a service. At some point, I want to ask the user for a confirmation, currently I'm doing it with just a confirm(...) request: const result = confirm('Are you sure?'); What if instead I would like to…
48
votes
11 answers

how to center a popoverview in swift

I have the following code to show a popoverview (dialog) without an arrow, which works fine. The only problem is, that the dialog is shown in the top left (IPad). I would like to center the view on the screen. What to change or add in my following…
mcfly soft
  • 11,289
  • 26
  • 98
  • 202