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
Filter by
Sorted by
Tagged with
1 vote
0 answers
461 views

How do I show a Bootstrap 5 modal as a form success message upon clicking submit? Using Netlify for logging submissions

Without using jquery or PHP, how do I trigger a modal upon a successful form submission? I'm using Bootstrap 5. My form submissions are being sent to Netlify. <form name="Index ...
James's user avatar
  • 26
0 votes
1 answer
179 views

Modal window not appearing on click

I'm new to Bootstrap and jQuery and I'm trying to integrate a modal window in my sales website. I copied the modal code from https://getbootstrap.com/docs/4.3/components/modal/ to get a test ...
m119's user avatar
  • 21
1 vote
1 answer
290 views

static navbar shakes horizontaly on leaving modal

currently I have troubles with bootstrap5 and modal respectively glightbox. when switching back from these applications, the static navbar shakes horizontaly. the same with glightbox, additional to ...
user avatar
0 votes
1 answer
1k views

Modal Save Button Doesn't Work (Bootstrap 5)

I am following this guide (https://softdevpractice.com/blog/asp-net-core-mvc-ajax-modals/), and cannot get the save button on my modal to work. I tried putting it within the form tag but then it was ...
Eitan K's user avatar
  • 837
-1 votes
1 answer
471 views

Jinja2 modal popup (Bootstrap 5) not appearing, no error

I've seen a few versions of this question posted but none with exactly the same parameters or with solutions that work for me, so here goes: within Jinja2 templating, I call a modal-popup in a form, ...
hal's user avatar
  • 33
0 votes
1 answer
833 views

Yii2 render view as modal, Pop up Window for forms

Render view page as a modal for preview: <h1><?= Html::encode($this->title) ?></h1> <p> <?= Html::button('Create Branches', ['value'=>Url::to(['/branches/create']...
Ysn's user avatar
  • 3
1 vote
1 answer
706 views

Call a modal (Bootstrap 5) from Jinja2 templating

I'm likely the nth person to have asked this question but am having trouble parsing the relevant documentation; I want to add a modal dialogue to a button declared with a function in Jinja2. The code ...
hal's user avatar
  • 33
0 votes
2 answers
1k views

I want to make a popup appear in php

I am making a forum-like website in php and I added a button inside each question container to delete questions on the forum. I am looking for a way to make a popup appear when the user clicks the ...
msa720's user avatar
  • 115
0 votes
1 answer
727 views

Why is my select dropdown open by default while opening Bootstrap modal?

I use Bootstrap modal and with fullcalendar. when I click to a day that opens a modal. Inside the form I have dropdown select which open by default. when I select an option, it is doesn't close. I ...
Mahdi Jafari's user avatar
1 vote
1 answer
181 views

I just want to disable the Approve button in updating process with modal boostrap

This is the modal form that show after clicking the view button in my table. Every field already have data value because I am updating a list. Now I want to disabled the Approve button base on status ...
John's user avatar
  • 13
0 votes
1 answer
2k views

Open custom bootstrap modal with vanilla JavaScript on DoubleClick event

I want to open custom bootstrap modal using data from an object when double clicked on an element. How to do this using vanilla JavaScript. Also how to add all functionalities in it : Ease Transition ...
matrixman's user avatar
1 vote
1 answer
2k views

Bootstrap Modal Footer Button Full Width

im trying to center and expand the "Close" button to its full width: https://i.stack.imgur.com/ogBsV.png Code so far: <div class="modal-dialog"> <div class="modal-...
Freeway6's user avatar
0 votes
0 answers
449 views

React Bootstrap Modal will not render with <Modal> Tag

I have a modal that I want to pop up in the center of the screen, and dims out the rest of the page. I followed the documentation from React-Bootstrap (https://react-bootstrap.github.io/components/...
user avatar
0 votes
2 answers
2k views

Bootstrap 4.5 (and not 4.0) Open Modal from Inside a Modal

I have a problem opening a modal from inside another modal. I am using Boostrap 4.5 My html code <div id="PopUPModal" class="modal fade" role="dialog"> ...
Cloud VGP's user avatar
1 vote
2 answers
615 views

Remove white modal image background

I have an image that is showed in a modal. Unfortunately this image has a white background. Only the image should be shown and the white shouldn't be visible. HTML: <div id="myModal" ...
Rahm6's user avatar
  • 38
0 votes
1 answer
327 views

Bootstrap Modal in php not closing

I have a modal script that I created in php and the script works fine but the php closing tag ?> is not closing at the end, tried putting the script in the header using echo but then the script ...
DaveParrish's user avatar
1 vote
1 answer
285 views

Vertical tab inside the modal not displayed properly in different browser

I am trying to display a vertical tab inside a Bootstrap 4 Modal. But the same modal is displayed differently in google chrome and firefox browser. Code i am using: <!-- Latest compiled and ...
Rasik's user avatar
  • 2,131
-1 votes
1 answer
1k views

I can't get the src of image it is always undefined [duplicate]

I have a modal and I want to choose an image from this modal and when I click "ekle" button I want it to be shown in another div. I'm trying to do this with innerHTML but image src is ...
SorryBaby's user avatar
0 votes
1 answer
252 views

Reactjs Props not working and not showing in browser

import { Modal } from "react-bootstrap"; import { ButtonStyled } from "../.."; const ModalCom = (props) => { const [show, setShow] = useState(false); const handleClose = () =&...
Roihan Adhen's user avatar
1 vote
1 answer
4k views

Bootstrap 5: Load Remote Content in Modal via URL

Good day, everyone. I'm trying to use Bootstrap 5 (no jQuery!) to open a remote file as a modal and pass a variable (via $_GET in the URL) to that remote file. I've gotten the following code to load ...
user1677409's user avatar
0 votes
0 answers
2k views

Bootstrap event "shown.bs.modal" fires multiple times everytime I click the toggle button

I am building a pdf view with PDF.js to render pdf inside bootstrap modal, and according to the documentation I can listen to "shown.bs.modal" event when the modal popup is displayed so I ...
Martins's user avatar
  • 1,180
0 votes
1 answer
1k views

How to prevent modal from closing when validation error - Laravel 8 + bootstrap

I want to prevent modal from closing when validation error. I am using modal from bootstrap. here's my trigger button <div class="col-lg-6 col-5 text-right"> <button class=&...
AK555666's user avatar
0 votes
0 answers
85 views

bootstrap modal only working once when I have the word fade

I'm using bootstrap modals, and showing and hiding them from javascript like this: $("#download_polling_box").modal("show") ... $("#download_polling_box")....
Darren Oakey's user avatar
  • 3,252
2 votes
4 answers
2k views

Bootstrap modal being rendered inside side bar

I'm losing my head over this modal which keeps showing up inside my side div area, I haven't found anything about it on the bootstrp5 documentation nor on any online forums. I just need it to render ...
João A. Veiga's user avatar
0 votes
1 answer
1k views

How to use several bootstrap modal in one view for CRUD action in Django?

I have a view by several modal and forms like Add_image , Add_birthday and a table for show all objects. I want for every ROW create button and modal for edit. When user click Edit_button open a modal ...
mirage's user avatar
  • 1
0 votes
1 answer
1k views

How to open Keycloak sign-in page inside a bootstrap modal

I am creating an npm package and I want to authenticate users with Keycloak. But what exactly I want to do is when someone clicks on authenticates button it should open a bootstrap modal and inside ...
Adesh Kumar's user avatar
0 votes
0 answers
39 views

Anyway I can use :not css property to avoid blurring bootstrap modal?

I want to blur the background of modal when the modal is triggered but because my modal is inside the container it is blurring everything when modal is shown. I was wondering if there is any way to ...
Shaaaaaaaaan's user avatar
0 votes
0 answers
486 views

Route to Bootstrap modal in Laravel

When a form on my Laravel site is successfully submitted I want it to direct to a Bootstrap modal which displays some results from it and gets further information from the user - at some later point ...
Hashim Aziz's user avatar
  • 4,858
0 votes
0 answers
134 views

Read-in df from csv before launching main app | Dash

I am trying to get my first dashboard with python dash running. The whole thing is very similar to this https://github.com/dkrizman/dash-manufacture-spc-dashboard. At the beginning a Dataframe is read ...
TheNik's user avatar
  • 1
0 votes
0 answers
86 views

How can I solve this problem : Undefined index: myfile & Trying to access array offset on value of type null?

I am trying to upload txt file in database and also save it in file that been declare I include my file for your references I have tried like this if (isset($filename)) but it did not work <!...
bella's user avatar
  • 1
1 vote
0 answers
105 views

Bootstrap dialog window opens behind another dialog window instead of infront

A dialog window is incorrectly opening behind another dialog window. I use the #modalMidWestEquipPlans data target to open the dialog window. How do I tweak the code so that the hyperlink opens the ...
endOfTunnel's user avatar
0 votes
1 answer
37 views

When modal opens using <a> tag if makes a form on my DOM disappear for no apparent reason

I use the code below inside an tag to open a modal. The code works great, but when the modal opens it erases everything inside my <form> tag below. Does anyone know why? I've changed the <a&...
rockets4all's user avatar
0 votes
1 answer
2k views

Modal pop-up non showing in asp.net core mvc web app

I have an ASP.NET CORE MVC based app. I am having a strange behavior when trying to show a modal popup with JQuery. I have following div: <div class="modal fade" tabindex="-1" ...
Harpreet Parmjit Saini's user avatar
0 votes
1 answer
469 views

Passing Props (img url ) using React-Modal || TypeError: Cannot read properties of undefined (reading 'map')

When I try to run this code it gives me this error: TypeError: Cannot read properties of undefined (reading 'map') This code should return the image modal but throwing an error. I don't get it why I'...
Choi Ka man's user avatar
1 vote
0 answers
515 views

How can I wrap long text in (js bootstrap react) dynamically created table cell which is input type?

I dynamically created an online table with node js in which some cells are for text input i.e. $tbody.append(`<tr><td><input type="text"></td></tr>`); I want ...
bim2016's user avatar
  • 101
-3 votes
1 answer
87 views

React modal close

I am a newbie in React. I used bootstrap CDN in the index.html file. I just want to close the bootstrap modal file after a submit. How to do that. Any helps or clue will do. Thanks in advance.
Agniswar Chakraborty's user avatar
1 vote
2 answers
3k views

Passing data into Angular 13 modal

I'm trying to pass data into a modal. The modal is a separate component alltogether. I'm able to console.log the bsModalRef property in the constructor, but for some reason, I can't console.log the ...
Code Junkie's user avatar
0 votes
1 answer
628 views

The modal pop up wont open after passing the values from repeater in asp.net

I have a search webpage where the user can apply for jobs. The jobs are displayed through repeater control. When the user clicks on apply button I want a modal to popup with two textboxes containing ...
sweet's user avatar
  • 5
1 vote
1 answer
546 views

How to run a bootstrap modal?

Bootstrap noob here. I'm working with bootstrap 4 and an html file, and I'm not able to get a modal working. The code I'm using is literally the one on the bs4 docs regarding modals. For some reason, ...
pgreenwood's user avatar
0 votes
1 answer
357 views

Django bootstrap: File is not being sent with the Post when using a modal form

In my Django App there is a page where users can upload files from their local machine (and do other things). The flow I built is so that users click on "+", a modal form comes up, users ...
giaggi's user avatar
  • 542
0 votes
0 answers
788 views

Flask WTF Forms and CSRF Token when using Bootstrap Modal Form (without JS)

After learning from the Flask Mega-Tutorial by Miguel Grinberg I have created a dashboard, where the user has a list of searches he has added/saved to his account. I added a delete button to every ...
Phil's user avatar
  • 637
0 votes
0 answers
102 views

My Bootstap modal form is covering the entire screen

I have a modal form in my ASP.NET Core 3.1 project. The problem is my modal form unexpectedly is covering entire of screen and I don't know why. My _Modal.cshtml: @model MyProject.CommonLayer....
R. Salehi's user avatar
  • 183
1 vote
1 answer
96 views

how to pass the value of an object to another object, already as a variable in Angular?

My class Inbound looks like down bellow. export class Inbound { constructor( public id: number, public incomingType: string, public quantity: number, public location: string, public ...
sroko1's user avatar
  • 11
1 vote
0 answers
2k views

B-Modal is Opening Two Times Vue

I am using Bootstrap-vue and targeted a b-modal with the <li> like this. But it opens the modals two times with one click <li> <a class="dropdown-item" v-b-modal.modal-2 ...
Aizaz Rehman's user avatar
0 votes
2 answers
54 views

impose Specific property to particular modal only

I wanted to make a modal and by default size of modal was small so i used modal-content class to increase it's height and width but this specification was given to all modals automatically used in ...
Gulshan's user avatar
  • 73
0 votes
1 answer
109 views

Is there a way to get the "contents" of a button into a variable in PHP foreach?

I am having trouble with a certain part of my website, where the user can click many buttons and based on that i need to figure out which one they pressed. There are certain timestamps and they choose ...
NeXx2You's user avatar
2 votes
1 answer
100 views

Changing image class inside bootstrap modal

I am trying to build a user profile image select tool that lives in a bootstrap modal. The idea is that when the user clicks an image the image will be highlighted somehow (a border) and a "save ...
Zeta-Squared's user avatar
1 vote
2 answers
3k views

how do i open modal with javascript. without using jquery

How do I make a modal visible with javascript? I don't want to do it using jquery. i just want it with javascript. And I don't want it to open when I click a button. I want it to be opened as a result ...
batuhan343434's user avatar
0 votes
1 answer
869 views

Laravel 8: keep modal open if there are errors

I would like to let the modal keep open if there are errors,but the modal will not auto open when there are errors <meta charset="UTF-8" /> <meta name="viewport" ...
HaHa's user avatar
  • 31
0 votes
1 answer
794 views

Jquery.load HTML and insert into bootstrap modal

I'm kind of stuck at the moment. Would really appreciate if someone can help me with this. First time asking a question, so please bear with me :) I have a main page with a few buttons. Each button ...
Nick's user avatar
  • 3

1
12 13
14
15 16
155