Stack Overflow
Stack Overflow

Questions tagged [bootstrap-modal]

Bootstrap provides a JavaScript-powered dialog element that can be used to replace native dialogs (to a degree); unlike native dialogs, Bootstrap modals cannot block the flow of execution.

Bootstrap provides a JavaScript-powered dialog element that can be used to replace native dialogs (to a degree); unlike native dialogs, Bootstrap modals cannot block the flow of execution.

Dialogs can be manually triggered (using Bootstrap's .modal() function), or via data-attributes. Modals must be triggered on correctly-structured HTML templates, as shown in the linked documentation.

7716 questions
289
votes
21 answers

Launch Bootstrap Modal on Page Load

I don't know JavaScript at all. The Bootstrap documentation says to Call the modal via JavaScript: $('#myModal').modal(options) I have no clue how to call this on a page load. Using the supplied code on the Bootstrap page I can successfully call…
Brandon
  • 3,019
  • 2
  • 14
  • 6
191
votes
33 answers

Vertically centering Bootstrap modal window

I would like to center my modal on the viewport (middle) I tried to add some css properties .modal { position: fixed; top:50%; left:50%; } I'm using this example http://jsfiddle.net/rniemeyer/Wjjnd/ I tried $("#MyModal").modal('show').css( …
user2613813
  • 1,951
  • 2
  • 13
  • 10
156
votes
15 answers

Bootstrap modal: is not a function

I have a modal in my page. When I try to call it when the windows load, it prints an error to the console that says : $(...).modal is not a function This is my Modal HTML :
129
votes
2 answers

What's the tabindex="-1" in bootstrap for

What's the tabindex attribute in Bootstrap 3 for? Its documentation doesn't say anything about them although they use them practically in all modals. I've only find this regarding its use, which doesn't really say much Accessible tooltips for…
Alvaro
  • 40,778
  • 30
  • 164
  • 336
107
votes
8 answers

Capture close event on Bootstrap Modal

I have a Bootstrap Modal to select events. If the user clicks on the X button or outside the modal, I would like to send them to the default event. How can I capture these events? This is my HTML code:
85
votes
14 answers

iOS 11 Safari bootstrap modal text area outside of cursor

With iOS 11 safari, input textbox cursor are outside of input textbox. We did not get why it is having this problem. As you can see my focused text box is email text input but my cursor is outside of it. This only happens with iOS 11 Safari
kekkeme
  • 942
  • 1
  • 7
  • 10
82
votes
13 answers

Can I check if Bootstrap Modal Shown / Hidden?

Can I check if Bootstrap Modal currently Shown / Hidden Programatically? Like bool a = if("#myModal").shown(); ? I need true/false
user2736812
  • 1,301
  • 4
  • 12
  • 15
77
votes
12 answers

Autocomplete issue into bootstrap modal

I have a display problem in the jQuery autocomplete inside a modal dialog bootstrap. When I mouse scroll, the results do not remain attached to the input. Is there a way to solve this? Here JsFiddle: .ui-autocomplete-input { border: none; …
Lughino
  • 4,060
  • 11
  • 31
  • 61
76
votes
14 answers

Modal width (increase)

I want a modal to be 80% or so of a screen width. modal-lg isn't large enough. This: .modal .modal-dialog { width: 80%; } Doesn't work with Bootstrap 4.
Oleg Antonyan
  • 2,943
  • 3
  • 28
  • 44
75
votes
7 answers

Set textarea width to 100% in bootstrap modal

Was trying all possible ways, but never succeeded:
…
Bartosz
  • 4,542
  • 11
  • 43
  • 69
66
votes
10 answers

In Bootstrap open Enlarge image in modal

How do I open / enlarge an image in a modal using jquery / js and not data attributes? Anytime a user inserts an image into a content editor I need it to be clickable to expand in a modal with js, so I cannot rely on the user to input data…
Jibes
  • 895
  • 2
  • 11
  • 18
65
votes
4 answers

How can I use Bootstrap modals without loading the entire library?

I'm integrating my Modal from Bootstrap with another site that doesn't use it. I see that bootstrap lets you separate the Javascript for each component. But what about the CSS? If I link to bootstrap.css the whole site will change. I just want…
mdundas
  • 779
  • 1
  • 6
  • 11
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
60
votes
8 answers

Confirm deletion using Bootstrap 3 modal box

I need to confirm deletion using Bootstrap 3 modal box (YES/NO). How can I create this? HTML code:
53
votes
6 answers

Scrolling issues with multiple bootstrap modals

I have a page with a modal with a lot of info so you need to scroll. This modal contains a link to a second modal. When I open modal 1 click on link to open modal 2 (modal 1 stays in background) and then close modal 2 so that I am back on modal…
gpanterov
  • 1,365
  • 2
  • 15
  • 25
1
2 3
…
99 100