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
702
votes
66 answers

Bootstrap modal appearing under background

I have used the code for my modal straight from the Bootstrap example, and have included only the bootstrap.js (and not bootstrap-modal.js). However, my modal is appearing underneath the grey fade (backdrop) and is non editable. Here's what it looks…
natlines
  • 7,426
  • 4
  • 17
  • 14
603
votes
12 answers

Bind a function to Twitter Bootstrap Modal Close

I am using the Twitter Bootstrap lib on a new project and I want for part of the page to refresh and retrieve the latest json data on modal close. I dont see this anywhere in the documentation can someone point it out to me or suggest a…
BillPull
  • 6,853
  • 15
  • 60
  • 99
588
votes
24 answers

Disable click outside of bootstrap modal area to close modal

I am making a bootstrap website, with a couple of Bootstrap 'Modals'. I'm trying to customize some of the default features. Problem is this; You can close the modal by clicking on the background. Is there anyway to disable this feature? On specifc…
Egghead
  • 6,837
  • 5
  • 20
  • 38
581
votes
16 answers

Prevent Bootstrap Modal from disappearing when clicking outside or pressing escape?

I'm using the Twitter Bootstrap modal as a wizard window, and would like to prevent the user from closing it when clicking outside of the modal or when pressing escape. Instead, I want it to be closed when the user presses the finish button. How…
Ehsan Zargar Ershadi
  • 24,115
  • 17
  • 65
  • 95
578
votes
28 answers

Disallow Twitter Bootstrap modal window from closing

I am creating a modal window using Twitter Bootstrap. The default behavior is if you click outside the modal area, the modal will automatically close. I would like to disable that -- i.e. not close the modal window when clicking outside the…
user1296175
  • 5,831
  • 3
  • 15
  • 10
542
votes
30 answers

Close Bootstrap Modal

I have a bootstrap modal dialog box that I want to show initially, then when the user clicks on the page, it disappears. I have the following: $(function () { $('#modal').modal(toggle) });
348
votes
27 answers

How to hide Bootstrap modal with javascript?

I've read the posts here, the Bootstrap site, and Googled like mad - but can't find what I'm sure is an easy answer... I have a Bootstrap modal that I open from a link_to helper like this: <%= link_to "New Contact", new_contact_path, {remote: true,…
jvillian
  • 19,953
  • 5
  • 31
  • 44
289
votes
34 answers

Bootstrap 3 modal vertical position center

This is a two part question: How can you position the modal vertically in the center when you don't know the exact height of the modal? Is it possible to have the modal centered and have overflow:auto in the modal-body, but only if the modal…
scooterlord
  • 15,124
  • 11
  • 49
  • 68
280
votes
38 answers

Twitter bootstrap modal-backdrop doesn't disappear

I am using the Twitter bootstrap Modal dialog. When I click on the submit button of the bootstrap modal dialog, it sends an AJAX request. My problem is that the modal-backdrop doesn't disappear. The Modal dialog does disappear correctly, but instead…
paganotti
  • 5,591
  • 8
  • 37
  • 49
270
votes
5 answers

How can I display a modal dialog in Redux that performs asynchronous actions?

I'm building an app that needs to show a confirm dialog in some situations. Let's say I want to remove something, then I'll dispatch an action like deleteSomething(id) so some reducer will catch that event and will fill the dialog reducer in order…
carlesba
  • 3,106
  • 3
  • 17
  • 16
265
votes
22 answers

Twitter bootstrap remote modal shows same content every time

I am using Twitter bootstrap, I have specified a modal
Dhruv Kumar Jha
  • 6,421
  • 8
  • 37
  • 48
243
votes
7 answers

Calling a function on Bootstrap modal open

I used to use jQuery UI's dialog, and it had the open option, where you can specify some Javascript code to execute once the dialog is opened. I would have used that option to select the text within the dialog using a function I have. Now I want to…
Mohamed Khamis
  • 7,731
  • 10
  • 38
  • 58
242
votes
35 answers

Multiple modals overlay

I need that the overlay shows above the first modal, not in the back. $('#openBtn').click(function(){ $('#myModal').modal({show:true}) }); Launch modal
226
votes
5 answers

How to handle the modal closing event in Twitter Bootstrap?

In Twitter bootstrap, looking at the modals documentation. I wasn't able to figure out if there is a way to listen to the close event of the modal and execute a function. e.g. lets take this modal as an example:
Houman
  • 64,245
  • 87
  • 278
  • 460
222
votes
27 answers

Bootstrap Modal immediately disappearing

I'm working on a website using bootstrap. Basically, I wanted to use a modal in the home page, summoned by the button in the Hero Unit. Button code:
1
2 3
99 100