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-modal
7,749
questions
0
votes
0
answers
18
views
Vue+Bootstrap: Prevent modal closing with a flag
I have a modal component that displays a form:
<template>
<div ref="modal" class="modal fade" :id="id" tabindex="-1" role="dialog">
&...
0
votes
1
answer
30
views
how can i make functions work inside a modal?
I am working on a script for work and halfway through writing my code, i changed my code to pull up a majority of my HTML in a modal. My problem is that i have already made a lot of functions that now ...
- 11
0
votes
1
answer
35
views
Blazor test page not opening Modal
I have the following code but when it renders to the browser it doesn't have an onClick call so clicking the button has no effect (go easy on me this is my first Blazor app):
I have a UserComponent ...
- 387
0
votes
0
answers
31
views
Disable auto focus on select2 drop-down in modal?
I have added multiple Select2 dropdowns in my modal and initialized these select dropdowns when the modal opens. There was one problem: when we open the Select2 dropdown, its positioning was not ...
-1
votes
0
answers
17
views
BOOTSTRAP_ERROR [closed]
I have errors with my Bootstrap, the styles are not applied, but when I forcefully empty the cache they work, but if I restart it without cache the styles are lost. style imageimagen sin estilo
I want ...
- 1
0
votes
2
answers
54
views
How to resize Bootstrap modal width with animation [closed]
I want to resize my Bootstrap 5 modal width after clicking a button. My current code works great.
But now I want to animate this change when it's getting bigger.
I've tried with animate transition in ...
- 1,089
0
votes
1
answer
35
views
Links(Hyperlinks) inside an svg not working when the svg is placed in an img tag in a Bootstrap 5 Modal
In fact , the pointer doesn't even change its shape when it is hovered over the part containing the hyperlink. When I open the svg file separately in my browser , the links work alright . Below is ...
0
votes
0
answers
50
views
Menu and submenu with 2 modal in laravel
I have a problem with menu and submenu calling with 2 different modal. I would like when choose in the first menu see the elements of the submenu in another modal. The problem is that I loss the ...
- 11
0
votes
1
answer
42
views
Bootstrap modal in .NET Core 8 is not rendered properly
I have a simple bootstrap modal but it is not showing properly in a .NET Core 8 project, all other bootstrap elements in my application are working properly, I installed bootstrap as client-side ...
- 31
-1
votes
0
answers
17
views
Bootstrap modal does not trigger inside a django for loop
I want to attach a modal to all images. But for some reason the modal is not triggered and the entire page becomes un-clickable.
I have made sure that all modals triggers and modal have a unique ID ...
- 51
0
votes
0
answers
30
views
How do I display an image in a Modal Window Shopping Cart (Javascript/Bootstrap)
I have used someone else's code as I am very new to Javascript.
I have managed to get the add to shopping cart functioning, displaying product title, price etc. but would like to add a small thumbnail ...
- 1
0
votes
0
answers
25
views
Bootstrap modal or canvas gets larger each time called
I am using bootstrap and an implementation of a signature pad from [https://github.com/szimek/signature_pad][1]
The problem is, each time I call the modal to capture a signature the modal (and ...
- 127
0
votes
0
answers
13
views
In CreateView, django-bootstrap-modal-forms is executing the form twice
I'm pretty new to Django, and the English isn't my language. I'll try my best to explain what happens when I'm using django-bootstrap-modal-forms.
I have a page that has a button that calls a POPUP (a ...
- 1
0
votes
0
answers
29
views
I want to align modal center bottom on all screens
This is my code i want to do that when ever modal will open it will aligned in center bttom on all screen how can i achive that ?
i do this code but its not working on all screen sizes can any one ...
- 35
0
votes
0
answers
32
views
Angular Modal not closing, I can open it but then the screen goes a bit dark and nothing works
I'm using creative tim free angular argon-dashboard template. I'm trying to create a modal, but when I click the button to open the modal, it opens but then the screen gets a dark overlay and the ...
0
votes
0
answers
28
views
How to display text input box over modal in abp framework?
I have the following code which is a modal element. The "NewButton" element is supposed to trigger a text input box in which the user writes the reason for the delete action. The Scripts ...
- 9
0
votes
0
answers
42
views
bootstrap modal, close only if input value matches
i am new with coding, very beginner level. i want simple bootstrap 5 modal, where only have two options.
input
close button
and i want close button to work only if input has value 123.
thank you
...
- 11
0
votes
0
answers
33
views
Submit form from Modal and only refresh the modal?
I have a main.html HTML page with some buttons that opens a modal. Depending on which button is clicked, the modal will dynamic load content from an external PHP script - each button calls a ...
- 3,016
0
votes
1
answer
40
views
Unable to view a pop-up modal properly in yii2
I am trying to show a pop-up modal on a button click. But when I click on the button it shows for a small time and then vanishes leaving the screen to black.
Below is my code
<?PHP
use kartik\...
- 484
0
votes
0
answers
38
views
data popover not showing up in modal
I have the following popover buttons in multiple areas of my pages. With onmouseenter and onmouseleave the popover is working just fine placing the info/tip popover next to the button/icon that was ...
- 3,016
0
votes
1
answer
30
views
React: Array inside of State is undefined when accessed from callback
I have a callback function, that is supposed to edit a value in an array, that is inside of a State. When I try to access the dataZähler, so the array itself, I get unedefined/Array of length 0 back. ...
- 643
0
votes
1
answer
26
views
Bootstrap Modal causes useEffect({...}, []) to trigger again
When using the Bootstrap <Modal /> component, when I do callbacks to the parent component, my entrie page rerenders, and triggers my useEffect({...}, [])-Hook, which should only be called once, ...
- 643
0
votes
1
answer
43
views
Using a custom modal in vue, 2 times inside another component renders only the first component data
So the problem is that I am working in a Laravel Vue application both are different application. The problem I am facing is that I have a created a component for modal using bootstrap in VUE JS.
And I ...
- 28
0
votes
0
answers
29
views
Remote modal not rendering validation errors on file upload - Ruby on Rails
I have a custom validation to accept only PDF on active storage attachment. I have tried to upload non-PDF file to see the errors on the form(remote modal) but on the logs it shows Missing Partial, it ...
0
votes
0
answers
34
views
Bootstrap modal component not showing up
I have this in my app.tsx:
return (
<>
{console.log(showModal)}
{showModal === true && <Modal onClose={toggleModal}></Modal>}
</>
);
and I copied ...
- 65
0
votes
0
answers
19
views
Customise Add Media - Media Modal in WYSIWYG Editor in Wordpress
I am using a front-end submission form for users to contribute posts to my platform. Users can upload text and images via the content area.
However, I would like to simplify the interface by limiting ...
- 3
0
votes
1
answer
58
views
jquery modal and autocomplete not working with button for postback
I have a problem with an asp.net site using masterpage in which I would like to have a jquery modal where user can search and submit text. I would like to get the insert text with an postback for ...
- 2,178
1
vote
1
answer
55
views
How to prevent Bootstrap modal from opening when clicking on link
I have a table where clicking anywhere on the row will open a modal dialog (to edit the row) but there are columns that contain links . When those links are clicked on, I don't want to go to the link ...
- 19
0
votes
1
answer
20
views
Parameter In Child Modal Component Not Being Updated Properly
Have two pages: UsersManagement.razor and UserDeletionConfirmation.razor. UserDeletionConfirmation.razor is the modal which is being called from UsersManagement.razor.
The problem is that I have a ...
- 77
0
votes
0
answers
12
views
React-Boostrap-Modal Not showing its styling in my Next.js Application/
i have this code that when the button "New Chat" is pressed it will popup the modal
return (
<div className="w-full overflow-y-scroll p-4 text-black">
{...
0
votes
0
answers
60
views
Running Into Error TS2739 When Working On My Modal Component
Just trying to set up a simple Modal component class to use on a button on my header. You click the button and it calls this component and pulls up a Modal popup. Only issue is my Modal.Header is ...
- 57
0
votes
0
answers
16
views
Select 2 , When no result Found Show a Button and open modal
I am trying to use Select2. When there is no searc result it is showing a Add button at below.
Image 1
Clicking on the add button opening the pop-up. So far it is good. But the select2 search box is ...
1
vote
0
answers
40
views
How to make bootstrap toast animation work?
Hey I'm reading these docs and it seems that bootstrap toast elements has a fuature of autohiding and even some fade out effects I guess.. But it doesn't work for me....
export const ErrorInfoMessages ...
- 45
0
votes
0
answers
10
views
Boostrap Modal Not Operating (BS v4.5) Flask
I have been attempting to implement modals for the Edit and Create functionality for a basic CRUD website using Flask and SQLAlchemy, to no avail. The buttons do nothing when pressed.
I have gone ...
0
votes
1
answer
37
views
Bootstrap Modal header css variable not defined - var(--bs-modal-header-padding) not defined
I am not using modal-header inside modal
I want to use modal-header css property, inside normal div
But css property has values when its inside modal but it shows variable not defined when used in ...
0
votes
1
answer
30
views
How do I close a modal window inside a form without sending data to the server and prevent the page from reloading?
I have a web with javaee and primefaces, and I have bootstrap integrated to the project.
I know that with p:dialog I can perform the same behavior as a bootstrap modal window, but I implemented the ...
- 23
-1
votes
2
answers
121
views
Bootstrap modal not triggering after upgrading to Bootstrap 5 and jQuery 3 in ASP.NET Core
Recently I updated jQuery from v2.2.4 to v3.7.1 and Bootstrap from v2.2.2 to v5.0.2 in my ASP.NET Core project. After the update, I'm facing an issue where modal pop-ups are not triggering when ...
- 1
0
votes
0
answers
81
views
how to disable the enforceFocus property applied by bootstrap modal
I have a Chrome extension that injects and opens a modal on other websites, the modal of my chrome extension is made using pure HTML, CSS, and JavaScript. When my extension opens modal on a website ...
0
votes
0
answers
15
views
How to bootstrap module contact to node js express-generator
My project I could not connect bootstrap framework module . May tutorial I check
It could not working.
May tutorial video and wab-site I look
But could not working properly. I Think
Something code ...
0
votes
1
answer
51
views
Bootstrap modal.show() fired instantly instead of waiting asynchronously
I have a form submission that call an API like
<button
class="btn btn-primary w-100"
data-bs-toggle="modal"
data-bs-target="#...
- 1,445
0
votes
1
answer
82
views
Using formvalidation.io in a Bootstrap 5 modal
I am loading a remote page into a Bootstrap 5 Modal using AJAX
Code to open the modal:
<button type="button" data-id="5" class="btn btn-status">Open</button>
...
- 83
0
votes
0
answers
27
views
Angular Model Components using Bootstrap and popper js
I am trying to Trigger the model to open when clicking on the add tracking button in the tracking modal
<button (click)="toggleForm()" class="btn btn-primary">Add Tracking<...
0
votes
0
answers
23
views
How to access variable to pass through url_for() as src in Flask App
I am currently working on a web app, in which users upload files, a ML algorithm is applied, and I want to add the functionality to view the images they originally uploaded in a Bootstrap Modal. I'm ...
0
votes
1
answer
39
views
navbar not appear in the result?
I'm learning on angular 15.0.0 and I have faced an issue
the navbar doesn't appear why does nothing appear except the Recipe Book
the code
<nav class = "navbar navbar-default">
<...
- 1
0
votes
1
answer
59
views
.NET MVC Bootstrap Modal not showing up
The action below, manages order quotes. And I have an if statement inside. If product quantity in order is bigger than product in the stock, i want to show an error message with TempData and Bootstrap ...
- 19
0
votes
0
answers
73
views
Opening a Bootstrap Modal will freeze the entire page (angular)
I have a boootstrap card and I want to open a modal when I click on it:
<div class="row">
<div class="col-lg-6" *ngFor="let newsItem of filteredNews">
<div class="box"&...
- 1
0
votes
0
answers
53
views
How to Prevent Select2 Dropdown from Moving with Scroll inside a Bootstrap Vue Modal?
I'm working on a project that uses Vue.js and Bootstrap-Vue. Inside a Bootstrap modal, I've integrated a Select2 dropdown. I encountered an issue where the modal wouldn't scroll when the Select2 ...
- 127
0
votes
0
answers
36
views
modal is not shown up when convert to vue 3
I am using vue latest version 3.4.21 and tried to convert a modal from vue2. My codes have:
main.js as:
import { createApp } from 'vue';
import * as uiv from 'uiv';
const app = createApp({
data()...
0
votes
0
answers
27
views
I created the model and set the primary key. How to show model primary keys in Django templates [duplicate]
I am new to Django, I want to display table data to Modal html form but it always shows the 1st record on Modal form. For e.g. in the image below, I have clicked on 43. TEST - 4, 43 is the primary key,...
0
votes
0
answers
41
views
jest test if modal component is being opened
I have a nextJs/React/Bootstrap app with a Bootstrap modal component. I am using Jest to test. I cannot get jest to find the modal component on the rendered page after I simulate clicking the button ...
- 11