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
14
votes
2 answers

Close bootstrap modal without using "hide" and "data-dismiss"

I want to close bootstrap modal box conditionally. If I use $('#modal').modal('hide'); this, some thing goes wrong with my code. And If I use data-dismiss="modal" in the HTML template, modal dismiss action performs before my actual functionality…
Ruchi Agarwal
  • 543
  • 3
  • 8
  • 18
13
votes
9 answers

how to load java script variable in to the bootstrap model text box as value

I have some issue in javascript variable load in to the bootstrap model input box: setTimeout(function() { swal({ title: "OverTime Status!", text: "You Need to get Sub OT Approval " + data.value + " Hours to Time allocate in the…
Code Kris
  • 447
  • 3
  • 19
13
votes
7 answers

How to close an Angular Bootstrap modal

I´m working with Angular 4, Firebase and Angular Bootstrap. I open the modal, which is a user form, and the idea is to close the modal as soon as the user logs in using one of the methods to login (google auth, Facebook auth or email and password…
Miguel Frias
  • 2,544
  • 8
  • 32
  • 53
13
votes
4 answers

Using Bootstraps Input Field Style with JQuery Functionalities

I'm using Bootstrap and JQuery UI and i seem to have stumbled upon a problem. I styled most of my code in Bootstrap. I was trying to implement a age validation dialog-box "Validation: if a person is less then 18 years of age do something...". I…
taji01
  • 2,527
  • 8
  • 36
  • 80
13
votes
4 answers

Angularjs ui bootstrap: how to vertical center modal component?

Recently I am learning angularjs. I have used bootstrap before. With jquery, I can easily change the position of the modal component position to make it vertical align. Now with angularjs, it seems not very easy to do that. Here is a plunker link of…
ahwyX100
  • 585
  • 2
  • 9
  • 22
13
votes
2 answers

Pass current scope to modalInstance when using controllerAs syntax

I'm using controllerAs syntax to avoid a $scope soup in my controllers, and also using ui.bootstrap to present a modal view. I need to open a modalInstace that shares the same scope as the current controller. When injecting the scope, you could…
afterxleep
  • 622
  • 1
  • 5
  • 17
12
votes
6 answers

Bootstrap modal window not closing on route change in angular 5

On using the "@ng-bootstrap/ng-bootstrap": "1.0.0-beta.6" version in my Angular 5 application, everything looks fine. But if I have a button in the modal window which triggers route change, the modal window is not closed even after the route…
Anonymous
  • 143
  • 1
  • 7
12
votes
4 answers

angular material md-datepicker inside bootstrap modal

I am tring to use Angular material md-datepicker inside a Bootstrap modal but, on clicking the date the modal popup hides. How can i solve that problem?
12
votes
8 answers

react bootstrap modal not showing

i want to show react-bootstrap-modal but only the overlay appear and modal not showing import Modal from 'react-bootstrap-modal'; ......
Hisham
  • 143
  • 2
  • 2
  • 6
12
votes
4 answers

Bootstrap select loading takes too long in IE

I'm loading 1000 records to a bootstrap select dropdownlist. It takes about 2 seconds in Chrome but takes 30 seconds in IE 9. Also, cancel or x out the bootstrap modal in IE takes 10+s too. The API call is ok but the rendering is so slow; Could…
Quentin
  • 1,310
  • 18
  • 30
12
votes
3 answers

ROR pass params to modal

I'm trying to open a modal that displays a list of items. The list of items is already available in the view as a variable. How do I pass this variable to the modal? Below is roughly how the main view looks like: View.html.erb
<%=…
sotn
  • 1,833
  • 5
  • 35
  • 65
12
votes
13 answers

Angular ui-select is not displaying the list of options when included in angular-ui-bootstrap modal

I am facing an issue with the anular-ui-bootstrap modal directive. Am using the angular's ui-select component in my app as a replacement for the html select. This ui-select is working fine in any page it is being included. But when i tried to…
Dhana Sekar
  • 631
  • 1
  • 4
  • 13
12
votes
4 answers

bootstrap how to detect which button closed a modal dialog on 'hidden_modal_bs' event func?

I have a welcome type bootstrap-modal on homepage that shows three buttons, each one of them should load different pages Here it is a relevant excerpt of the HTML
11
votes
4 answers

Modal only showing after the second click

I'm developing in 1 component = 1 file style in vue2. I have a Table constructed via a Bootstrap-Vue Table Component, I'm using the provider to pass it an items. one of the columns contains modify buttons for each row. these buttons trigger a…
tatsu
  • 2,316
  • 7
  • 43
  • 87
11
votes
3 answers

Vue.js AJAX call inside Modal

I am trying to have a modal pop up with details of a credit card. The details come from an AJAX request. For some reason the root Vue instance is updating but the component instance is not. This is what I currently have - HTML: