Ways to stop a bootstrap modal from closing upon pressing the ESC key and if it is not in

Utilizing the Bootstrap modal to showcase details from my database, including text and image attachments. Upon clicking an image attachment, I focus a div element to display a full-screen view of that image.

My goal is to allow the user to close the image div by pressing the Esc key only if it is currently visible on the screen (i.e., does not contain the "d-none" class). Although I successfully implemented this functionality using a keydown event on the div, I encountered an issue where the modal also closes automatically when pressing the Esc key. How can I prevent this behavior?

I do not wish to permanently disable the "Closing on Esc key" feature of the modal; instead, I want to disable it specifically when the image div is being displayed on the screen.

NOTE: If a script is required, please provide a solution using vanilla JavaScript.

javascriptbootstrap-5

Answer №1

To address my issue, inserting e.stopPropagation() within the keydown event of the image div successfully resolved it.

In addition, I included tabindex="0" to the image div and triggered focus when showing the image div using 

document.getElementById('#image-div').focus()
.

I trust that this information will be beneficial to others facing a similar problem.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the proper way to use an AND operation in jQuery on multiple attributes?

I have a list of DIV tags structured as follows: <div status="1" searchText="some text">...</div> <div status="2" searchText="more text">...</div> <div status="1" searchText="even">...</div> To toggle the visibility of ...

javascriptjquery

Troubleshooting inactive CSS hover animation

Greetings! I'm facing an issue with a CSS hover animation. Here are two demos I've created: In the first DEMO, the animation works perfectly. However, in the second DEMO, it doesn't seem to be functioning. On the second demo, there are two ...

javascriptjquerycss

What is the best approach to incorporating two distinct grid layouts within a single section?

I am attempting to replicate the header-graphic navigation found on this website: It appears that they are not using a grid for the header-graphic area, but rather keeping them separated as 2 divs within their Hero block container. I am interested in recr ...

javascriptjquerycssgrid

Dynamically extracting JSON values

This question may seem very basic to some, but I am struggling with a specific part in the code snippet below. I am trying to make the 'res.DATA.VALUE[i]' part dynamic by using the 'textCol' variable. My intention is to replace it with ...

javascriptjqueryjson

Unique collection of vibrant color schemes for Bootstrap 5 design

The Bootstrap 5 documentation showcases a range of color palettes, providing options for white / black text on various background intensities to ensure optimal contrast. You can explore these color schemes at https://getbootstrap.com/docs/5.0/customize/col ...

sasscolorsbootstrap-5

I'm looking for help on creating a three-column table using javascript/jquery. The table should display Product, Price, and Discount (which is calculated at 20%). Can anyone

Check out this code snippet. var items = ["Laptop", "Tablet", "Smartphone", "Headphones", "Camera"]; var costs = [599.99, 299.99, 799.99, 149.99, 499.99]; displayItems = ""; totalCost = 0; for (var j = 0; j < items.length; j++) { displayItems += " ...

javascripthtmljquery

Animated text in ThreeJS

I'm interested in finding a way to animate text in ThreeJS that doesn't involve placing it directly on a plane. My ideal scenario would be to have the text appear as 2D, floating above a model. I've experimented with using divs positioned ou ...

javascriptanimationthree.js

Bypass ajax request with the use of a returned promise

I've come across a scenario where I have a function within a class that is designed to return a promise for deleting an item. Here's what the function looks like: function Delete(){ // if(this.id == ""){ // return ?; // } ...

javascriptjquery

Is there a method to access the output of getStaticProps function from NextJS API routes?

Is there a method to compute and cache new data during build time that is essential for both the front-end and back-end API routes? I'm looking for a way to access the static properties generated by API routes at build time since the routes are access ...

javascriptreactjsapinext.jsvercel

Include a selection of images within a popover box

I am currently working on a component that contains various experiences, each with its own popover. My goal is to display an array of images within each popover. Specifically, I have different arrays of images named gastronomiaExperience, deportesExperien ...

javascriptreactjsmaterial-ui

What is the best way to make an SVG interactive so that it can activate a function when

I have a card where I've incorporated an SVG element from Bootstrap. My goal is to change the card's content when the SVG is clicked, essentially using the SVG as a button. <svg xmlns="http://www.w3.org/2000/svg" width="16" ...

reactjssvgbootstrap-5

What is the process for implementing optional chaining on a JSON object?

I'm currently facing an issue where I need to compare a value within a JSON object with a variable. if (resp.userdetails.name == username) { // do something } The challenge arises when not all resp objects contain the userdetails property, resulting ...

javascriptif-statementoption-typeoptional-chaining

I successfully linked expressjs, nodejs, reactjs, and mysql in my project. I'm puzzled as to why everything runs smoothly after I restart my express server, but encounters issues when I refresh the page

express path users.js var express = require('express'); var router = express.Router(); const connection = require('./MySQL.js') /* Accessing user data. */ router.get('/', function(req, res, next) { connection.connect() ...

javascriptnode.jsreactjsexpressdebugging

The navigation bar at the top of the page is causing content to be blocked on mobile screens, but not on desktop screens

My Fixed-Top navbar is causing an issue on mobile screens, as it is covering the top content of the page. This problem doesn't occur on PC screens. When I resize the browser width to fit a mobile screen, the navbar overlaps with the body content... &l ...

htmlcssnavbarbootstrap-5fixed

Unexpected token { in Fuse-Box when using Typescript

Here's the beginning of my fuse.ts file import { CSSPluginOptions } from 'fuse-box/plugins/stylesheet/CSSplugin'; import { argv } from 'yargs'; import * as path from 'path'; import { CSSPlugin, CSSResourcePlugin, Env ...

javascripttypescripttsconfig

Utilizing Hyperlinks in jQuery DataTables Cell with Data Pulled from Mysql Table

I have a question that builds upon the one before it: How to display a hyperlink in a cell with jQuery DataTables There is also a Fiddle link provided My current query revolves around implementing hyperlinks when fetching data from a MySQL database table ...

javascriptphpjqueryajaxdatatables

After deploying to Firebase, animations suddenly cease to function

After running npm run-script build and deploying my React app to Firebase hosting with firebase deploy, I encountered an issue where my animations stopped working. I'm puzzled as to why this is happening, especially since I've included keyframes ...

javascriptcssnpmweb-deploymentfirebase-hosting

IE11/Edge exhibits slow performance with components that have large datasets exclusively

Take a moment to analyze the following code snippet: <GridBody Rows={rows} />. Let's say that in this scenario, rows.length could reach 2000 or more, with each array containing approximately 8 columns. I have encountered a performance bottleneck ...

javascriptreactjsinternet-explorerlarge-data

How can I align the tags properly when inserting a tab box within a section tag?

How can I successfully insert a tab box within my section tag? I found this tab box tutorial on the website here The download link for the source code is available here: source code Below is the HTML code snippet: <!DOCTYPE html> <html> & ...

javascriptjqueryhtmlcss

Adjust the checked state of the checkbox based on the outcome of the promise's data

Whenever the checkbox is clicked and the resolved data in a promise is false, I want the checkbox to remain unchecked. If the data is true, then the checkbox should be checked. I have set up a codesandbox for this purpose. This example utilizes react and ...

javascriptreactjscheckboxpromise