Questions tagged [modal-dialog]
Refers to a graphical dialog used to display important information to the user. These dialogs appear above all other content, blocking application flow until user input is received.
11,520
questions
0
votes
2
answers
16
views
How to open and close a search bar in reacatjs?
I need to open a very simple search bar in reactjs, and there is no closing button because I want to click on the same button to close it.
Here is some code I tried out but didn't work.
const [...
1
vote
1
answer
26
views
Prevent HTML Modal Dialog from Closing
I want to use the <dialog> HTML element to create a modal. I'm trying to restrict the user's ability to close the modal under some circumstances, and tried to call e.preventDefault() when the ...
0
votes
0
answers
20
views
React: Close Modal from another Component
i want to Close a Modal in React from another Component. I open the modal from Component Event.js
//React imports
import React, { useEffect, useState } from "react";
import { useDispatch } ...
0
votes
1
answer
27
views
Closing modal window by clicking on backdrop (ReactJS)
Could you please help me with one issue? I'd like to make a closing modal window by clicking on backdrop (using ReactJS). But in result window is closing even i click on modal window (at any position)....
0
votes
0
answers
18
views
how to restrict open multiple dialog box in angular material
We open a dialog box of angular material with disabled property like:
const dialogReff = this.dialog.open(DialogComponent, {
width: '1000px',
backdropClass: 'cdk-overlay-...
0
votes
2
answers
25
views
Close Modal when clicked on other div
So i don't have a clue how to work this out.
I want to have it work like so: If you click on one paw the modal opens and if you click on the second paw the modal of paw 1 closes. What do i have to add ...
0
votes
0
answers
31
views
Remember user selection and either redirect or hide modal box on next visit
I want to create a modal box that prompts visitors to choose between A or B. If user chooses A, they will be redirected to another page, and if B, then they stay on the current website, but the modal ...
0
votes
0
answers
11
views
Bootstrap modal on Iphone - blank space
Hi im using a bootstrap modal and when opened the modal on an iphone and tap to write, the phone keyboard shows up and i noticed that a blank space at the bottom is added, anyone experienced this ...
0
votes
1
answer
33
views
How can i add thumbnails to search results in the Add Product modal (Woocommerce Admin)?
I'm trying to update the functionality of the search in the Add Products modal (when creating a new order in the WooCommerce Admin area) so that the thumbnail for each product in the search results is ...
1
vote
1
answer
43
views
Need to Shrink Functions
I'm doing a system related to recycled material. I pay to the person who brings the material, and there are 12 kinds of recycled material.
I need to shrink the functions of the buttons to be more ...
0
votes
3
answers
41
views
Make background dark grey when react native Modal is opened
I am using a react-native Modal, and I am trying to get the background to dim to a dark grey when it opens. I can't seem to get it to do this! I have tried adding a Main View and setting the ...
0
votes
1
answer
55
views
Undefined variable $errors Laravel in modal form
i got an error when opening modal. This is my code :
<div>
<x-button onclick="viewFormAdd()" data-bs-toggle="modal" type="button">Add New Data</x-button>...
-1
votes
0
answers
15
views
Footer is blocking bootstrap modal issue
I am new to web dev.
Can anyone help to make my modal always on top of my footer?
Right now the footer is blocking the bootstrap modal when I click edit data to call the modal input form.
0
votes
0
answers
23
views
Using Django, I keep Getting Uncaught TypeError: Illegal invocation When Trying to Open a Product Modal
To call my modal I use this:
{% for product in products %}
<div class="product-action product-action-1 p-abs" id='product-action' data-id="{{ product.id }}">
...
0
votes
2
answers
34
views
css modal show background content which makes less readable
As currently i am showing modal in react on click of button. but problem is it is showing background content in modal portion also. so, my modal content texts are conflicted with main content.
can ...
0
votes
1
answer
30
views
React router v6 modal reloading background page location (instead of saving scroll position)
Working with React Router v6. I have routes set up so that backgroundLocation is passed to the Routes and a modal opens correctly with a different route as the background page. I came across ...
0
votes
0
answers
23
views
Modal Content isn't rendering while the Backdrop is - can't figure out the error
I am trying to implement a cart as a Modal on my project. The issue is that the Backdrop is rendering as it should but the Overlay isn't. It has been 30 minutes but I can't figure out the error, ...
0
votes
2
answers
33
views
How do I update my parent component list after I click the submit button on the modal? Angular 11
I have in my parents component a list of dates.
A button opens a modal with a form that allows me to add a new object to the list. As soon as I clicked the save button, the modal closes. However, my ...
0
votes
3
answers
41
views
I need help on an HTML, CSS , JS modal. I can get the modal to hide, but when shown it does not position correctly or have bg-color or border
I am assuming that my JS and HTML is correct. I put my full code in, not so long, so the entire problem can be seen. I copied several sites CSS strategies,to no avail. I did try reputable sites, ...
0
votes
0
answers
19
views
How to open django login form in a modal window?
How can i open dJango modal form in a modal popup window?
from django_base.forms import User_registration_form
def login_view(request):
if request.method == 'POST':
form = ...
0
votes
0
answers
7
views
how can i fix this problem semantic ui modal won't close
Modal Show Code
$("#classification-model").modal({
autofocus: false,
showOnFocus: false
})
.modal('setting', 'closable', false).modal('show');
Modal Hide Code
...
0
votes
0
answers
10
views
Can't click in input text fields in Bootstrap Modal
I have seen several similar posts to my issue and have tried suggestions but none of them are working and I am hoping that someone can help me. I have a simple modal which contains 2 text input fields....
0
votes
1
answer
24
views
Bootstrap 5 Modal not receiving data from PHP with AJAX
I have a modal in bootstrap 5 that i'm trying to populate with custom data from a mysql database depending on the option i'm selecting.
So I have a table that is populated with some data using PHP and ...
0
votes
0
answers
7
views
How can i change to responsible design(modal)?
How can i change to responsible design?
if label/title is long, characters are displayed one at a time, with a line break.
and somehow it is applied to "margin bottom 16 px"
how can i delete ...
1
vote
2
answers
31
views
Web Accessibility - Navigating to Tab from tabpanel
I have a modal that consists of tab layout to enter some form data. The form is a list of radiogroups that can be quite long.
For a user to get back to the tab, currently they have to shift+tab all ...
0
votes
1
answer
25
views
Prevent show not fully loaded images
I have a page for showing users' data, like their images (Personal, Learning, etc).
For showing images, I have a Modal. it has an img tag.
Manager of the website, clicks on links, and website opens a ...
0
votes
0
answers
11
views
how to open a web page in angularjs modal
I am facing an issue in my PHP project it's based on angular js I have created a modal where I show an image when that modal will open but now I want to open a web page in that modal and I don't know ...
0
votes
0
answers
18
views
Python Selenium webdriver methods are getting failed with Timeout exception when a modal dialogue box is popped up
1)I am using python and selenium to test an invalid login scenario for a webpage authentication.
2)Once I am passing wrong credentials, a modal dialog appears on the screen.
3)After the dialog box ...
0
votes
0
answers
65
views
Opening MUI modal from a button in react-table not working
I have a react-table with one of the columns containing buttons for each row which should be used to view the row details using a modal from MUI.
Here is the snippet of my column data for the table:
...
0
votes
0
answers
18
views
Inactive bootstrap modal on button click
I'm using Bootstrap 5.1 in my ASP.NET MVC project and I want to add a bootstrap modal on button click. I got the modal from:
https://getbootstrap.com/docs/5.1/components/modal/
But when I click on the ...
2
votes
1
answer
19
views
Access object property using an enum type
I am trying to access an object property using an enum (not sure if this is the right approach) and I get this error
No overload matches this call. Overload 1 of 2, '(componentType:
Type, options?: ...
0
votes
0
answers
34
views
How to get data collected from PHP populated in Bootstrap modal?
I am trying to get collected data in Bootstrap modal but it is not working. This code was working ok in Bootstrap 4 but not in 5.
Here I am collecting data from PHP
<ul class="list-inline ...
0
votes
1
answer
30
views
Table closing after populating data passed as props from a modal
I'm passing data from am AddItem modal in react to a table in the NewInvoice component. The data is being populated to the table successfully but modal does not close after clicking the save button. ...
0
votes
0
answers
24
views
Is there any way to create a modal from a background image?
Is there any way to create a modal from a background image?
The example is from w3schools:
css:
.someplace {
background-image: url("img_tree.gif");
}
html:
<div class="someplace&...
-2
votes
0
answers
25
views
Takes two clicks to close window when stopModal is called
I have created a modal dialog by calling runModalForWindow after instantiating the dialog. I'm having trouble stopping the modal loop when the dialog is closed. I have tried various placements of ...
0
votes
0
answers
22
views
Problem on Showing Product Details Page using Bootstrap
I want when i click button details on my pagination of products.php, it appear the details taken from products_details.php.
As of right now, i only able to show the specific ID from each product ...
0
votes
1
answer
19
views
alert occurs more that one time for each button click in jquery
I have created a section in my php page with jquery and ajax, the response would create a button related to the index of the class of an element to open a modal for each. it is fine so far, but the ...
0
votes
1
answer
41
views
How do i get the ID of a product so i can display each product in Bootstrap Modal
I have a set of products in pagination in products.php , and i when i click "Details" button, i want a modal to popup and show each product Specification that i have in products_details.php.
...
0
votes
1
answer
50
views
React: how can I open a single modal when clicking on a card
I'm working on a personal project with the following requisites:
Consult an API which provides a list of objects with the following properties: {_id: String, title: String, url: String}
Render a grid ...
0
votes
1
answer
16
views
textarea height not working in bootstrap modal
I have a modal dialog in my ASP.NET Web application using the following code:
<div class="modal fade" id="mdlNewNote" tabindex="-1" aria-labelledby="...
0
votes
1
answer
15
views
Unable to dimiss a modal (react-native-date-picker)
So we are using this lib react-native-date-picker for date picking (obviously).
When user is timeout from app, we are navigating the user back to login screen. However if the date picker (this is a ...
0
votes
1
answer
24
views
How to render a modal after failed update in Rails 5.2?
I use a modal window to edit a schedule from the schedules index. Each schedule provides a link to the edit method:
<%= link_to edit_scheduler_production_schedule_path(schedule),
title:...
0
votes
1
answer
27
views
How to create tab trap in react using js?
I have an modal window that will open when the user press on some button in the process.
I need, for accessibility, that the tab will be trap inside the modal window.
Now , unfortunately, the tab work ...
0
votes
0
answers
14
views
How to disable the modal I'm getting for dropdowns on mobile?
I have some dropdowns on my Wordpress site and on mobile I'm getting this select modal rather than having it displayed the way it works on Desktop or even on tablets, where it has a search function. ...
0
votes
0
answers
5
views
how to display data in edit modal with thymleaf
I want to populate the data in my table when an edit button is clicked, I have already displayed those data in a table with a button corresponding to each row and when I click the button,I want the ...
0
votes
1
answer
20
views
react populate modal from graphql
I have a list of products in a react component:
I am trying to display a modal when I click on the specific product that displays the product information through a graphql query. The query works fine....
1
vote
0
answers
24
views
How do I nest multiple React contexts of the same type
Say I want to create a modal and handle the state through Reacts Context API
export const ModalUIProvider: FC = ({ children }) => {
const [isOpen, setIsOpen] = useState(false);
const ...
0
votes
1
answer
82
views
Opening child window in WPF MVVM pattern - correct solution?
I was struggling with opening new window in MVVM pattern without violating it's rules for a month. I have read I think every post here and watch every video about this, but as a amateur programmer I ...
0
votes
1
answer
33
views
Bootstrap-vue Modal: How to load iframe only once (not reloading) when opening/closing it
I'm using bootstrap-vue Modal.
I have an iframe in the modal.
I would like to load the iframe only once (when I first open the modal).
So I can show/hide the modal, while keeping the iframe state.
...
0
votes
0
answers
19
views
Modal is getting the last value from my table
I created a modal with bootstrap, in react, but when it opens, it takes the last value from my table(sql). Does anyone know why he does this, and how I fix it
this is my code with the table and modal
...