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
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…
Francesco Borzi
  • 56,083
  • 47
  • 179
  • 252
48
votes
30 answers

Twitter Bootstrap modal pushes html content to the left

If I open a modal dialog, through Twitter Bootstrap, I've noticed that it pushes all the html content of the page (i.e., in the container) to the left a little bit, and then puts it back to normal after closing itself. However, this only happens if…
EleventyOne
  • 7,300
  • 10
  • 35
  • 40
47
votes
16 answers

How to use code to open a modal in Angular 2?

Usually we use data-target="#myModal" in the
Hongbo Miao
  • 45,290
  • 60
  • 174
  • 267
44
votes
19 answers

Close Bootstrap modal on form submit

I have a Bootstrap modal dialog which contains a form. The modal dialog contains a submit and a cancel button. Now on submit button click the form is submitted successfully but the modal dialog isn't getting closed. Here is my HTML:
Lara
  • 2,821
  • 7
  • 39
  • 72
44
votes
9 answers

Change header background color of modal of twitter bootstrap

I am trying to change the background color of modal header of twitter bootstrap using following css code. .modal-header { padding:9px 15px; border-bottom:1px solid #eee; background-color: #0480be; } .modal-header…
Foysal Vai
  • 1,365
  • 3
  • 13
  • 19
39
votes
10 answers

How to vertically align Bootstrap v4 modal dialogs

Vertically center modal dialogues in Bootstrap 4. Note: The requirements below have been added to make it clear I am looking for a proper way to vertically center a Bootstrap modal, covering all possible cases, on all possible devices, in all…
tao
  • 82,996
  • 16
  • 114
  • 150
38
votes
6 answers

How to make modal dialog with blur background using Twitter Bootstrap?

Bootstrap use blackout when it shows modal dialog. How I make blur effect on entire background?
eugenes
  • 701
  • 2
  • 7
  • 16
38
votes
11 answers

How can I prevent body scrollbar and shifting when twitter bootstrap modal dialog is loaded?

When I open the twitter bootstrap modal dialog, the backdrop causes a scrollbar and shift the content. To avoid the scrollbar I use this css: .modal { overflow: hidden; } But I can not avoid the shift. regards, Marko I am using Bootstrap…
Marko
  • 1,291
  • 1
  • 21
  • 37
38
votes
11 answers

How to set twitter bootstrap modal wider and higher?

How to set twitter bootstrap modal wider and higher? Example here (please click: Launch demo modal): http://twitter.github.com/bootstrap/javascript.html#modals
mamasi
  • 915
  • 3
  • 10
  • 17
35
votes
5 answers

Create a simple Bootstrap Yes/No confirmation or just notification alert in AngularJS

It's so simple in a non-Angular environment. Just html and a two line of js code to show a modal confirmation dialog on the screen. Now I am developting an AngularJS project in which I am using ui-bootstrap modal confirmation dialogs all over the…
ilter
  • 4,030
  • 3
  • 34
  • 51
34
votes
5 answers

How to use Bootstrap modal using the anchor tag for Register?

I have a list of anchor tags for my navigation bar. I want to open a modal when "Register" is clicked. Here is the code:
  • Login
  • data-toggle="modal" data-target="modalRegister">…
    • Lebone
    • 493
    • 2
    • 7
    • 12
    34
    votes
    4 answers

    AngularJS passing data to bootstrap modal

    I think I'm missing something but cannot figure what. Basically I'm trying to pass an object to the modal like below, but instead of getting the passed object I gets null...so I think is a problem with the scope but I'm new in Angular and need some…
    Stefano Vuerich
    • 996
    • 1
    • 7
    • 28
    33
    votes
    6 answers

    Google Place Autocomplete not showing in Bootstrap modal

    FIX UPDATE: It seems that the way i was initializing the box was causing issues here is what fixed it