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
113
votes
8 answers

Avoid modal dismiss on enter keypress

I have set up a bootstrap modal with a form inside it, I just noticed that when I press the Enter key, the modal gets dismissed. Is there a way not to dismiss it when pressing Enter? I tried activating the modal with keyboard:false, but that only…
Luke Morgan
  • 1,900
  • 2
  • 14
  • 18
104
votes
4 answers

Disable auto focus in dialog- modal in Angular 2/ material

I'm using dialog from angular material-2. The problem is: I can't disable auto focus when modal-dialog is opened in iPhone or tablet especially. In iOS, it automatically focuses the first input field in the dialog! I tried with tab index and with…
Mohamad Arbash
  • 1,041
  • 2
  • 7
  • 6
104
votes
22 answers

bootstrap jquery show.bs.modal event won't fire

i'm using the modal example from the bootstrap 3 docs. the modal works. however i need to access the show.bs.modal event when it fires. for now i'm just trying: $('#myModal').on('show.bs.modal', function () { alert('hi') }) Nothing happens, the…
m4rlo
  • 1,153
  • 2
  • 7
  • 8
103
votes
6 answers

How to auto-center jQuery UI dialog when resizing browser?

When you use jquery UI dialog, all works well, except for one thing. When the browser is resized, the dialog just stays in it's initial position which can be really annoying. You can test it out on: http://jqueryui.com/demos/dialog/ Click on the…
Jorre
  • 17,273
  • 32
  • 100
  • 145
99
votes
6 answers

Unknown provider: $modalProvider <- $modal error with AngularJS

I keep receiving this error as I'm trying to implement bootstrap Modal window. What could be the cause of it? I've copy/pasted everything from http://angular-ui.github.io/bootstrap/#/modal here.
Xeen
  • 6,955
  • 16
  • 60
  • 111
95
votes
20 answers

Send values from one form to another form

I want to pass values between two Forms (c#). How can I do it? I have two forms: Form1 and Form2. Form1 contains one button. When I click on that button, Form2 should open and Form1 should be in inactive mode (i.e not selectable). Form2 contains…
Nagu
  • 4,954
  • 14
  • 52
  • 67
92
votes
26 answers

how to destroy bootstrap modal window completely?

I've made use of modal window for a wizard implementation which has around 4,5 steps. I need to destroy it completely after the last step(onFinish) and OnCancel step without having a page refresh. I can of course hide it, but hiding modal windows…
Akki
  • 1,718
  • 2
  • 29
  • 53
91
votes
17 answers

SwiftUI dismiss modal

Since SwiftUI is declarative there is no dismiss method. How can is add a dismiss/close button to the DetailView? struct DetailView: View { var body: some View { Text("Detail") } } struct ContentView : View { var body: some View { …
Ugo Arangino
  • 2,802
  • 1
  • 18
  • 19
91
votes
10 answers

How to get twitter bootstrap modal to close (after initial launch)

I'm very much a noob, so I think I'm overseeing something (probably obvious) with twitter bootstrap modal. What I am trying to do is get a modal to launch only on mobile. This works fine with adding the class .visible-phone on the modal div. So far…
Monique De Haas
  • 1,031
  • 1
  • 7
  • 8
83
votes
6 answers

Trying to make bootstrap modal wider

I am using this code but the modal is too thin:
80
votes
6 answers

Bootstrap 3 - How to load content in modal body via AJAX?

As you can see here, I have a button that launches a modal. Setting an href url for the button this url is automatically loaded into modal by Bootstrap 3. The fact is this page is loaded into modal root (as said in the bootstrap 3 documentation for…
Thiezar
  • 1,143
  • 2
  • 10
  • 16
80
votes
5 answers

Scope issues with Angular UI modal

I'm having trouble understanding/using the scopes for an angular UI modal. While not immediately apparent here, I have the modules and everything set up correctly (as far as I can tell), but these code samples in particular are where I'm finding…
coblr
  • 3,008
  • 3
  • 23
  • 31
79
votes
12 answers

jQuery UI Dialog Box - does not open after being closed

I have a problem with the jquery-ui dialog box. The problem is that when I close the dialog box and then I click on the link that triggers it, it does not pop-up again unless I refresh the page. How can I call the dialog box back without…
David Bonnici
  • 6,677
  • 12
  • 54
  • 72
77
votes
32 answers

Bootstrap Modal sitting behind backdrop

So I'm having nearly the exact same problem as @Jamescoo was but I think that my issue is coming from the fact that I have already positioned a couple of DIVs to create a sliding nav panel. Here's my exact setup replicated: …
WizzyBoom
  • 920
  • 1
  • 8
  • 18
74
votes
6 answers

Invoking modal window in AngularJS Bootstrap UI using JavaScript

Using the example mentioned here, how can I invoke the modal window using JavaScript instead of clicking a button? I am new to AngularJS and tried searching the documentation here and here without luck. Thanks
Ahmad Alfy
  • 13,107
  • 6
  • 65
  • 99