How to stop Bootstrap 4 modal from closing when pressing the "esc" key

I have implemented a feature using session storage to control the display of a modal on first page load. As I am not familiar with using cookies, I opted for session storage instead.

Within the modal, I dynamically change the header and close button upon the first closure, transforming it from a "getting started" modal to a "help modal".

My goal is to restrict the ability to close the modal using the esc key when the session storage is not yet configured and the modal is in "getting started" mode. However, once the modal is reopened as a "help modal", the esc event should be enabled.

Currently, this functionality is only working at 50% capacity - initially, the esc key cannot be used, even after switching to the "help" version. Additionally, reloading the page allows the esc key to function properly.

In the code snippet below, the else block handles the case where session storage is not set:

} else {
  // show the help modal
  $('#help').modal({
    keyboard: false
  });

  $('#help').modal('show');

  $('#help').on('hidden.bs.modal', function (e) {
    keyboard: true
  })
}

According to the documentation (https://getbootstrap.com/docs/4.0/components/modal/#events), the .on('hidden.bs.modal' event is triggered when the modal has finished being hidden from the user.

Can someone suggest which event handler I should use to achieve the desired functionality?

javascripttwitter-bootstrapbootstrap-4

Answer №1

It appears that you cannot simply update the configuration of a modal that has already been initialized by passing a new options object to it. If you try to do so like this:

$('#help').modal({
    keyboard: false
});

$('#help').modal({
    keyboard: true
});

The second call will not have any effect. To work around this, my suggestion would be to destroy the initial modal - which was created with keyboard: false - and create a new modal with keyboard event handling enabled.

Take a look at the snippet below for a demonstration.
Note: the first modal is initialized with keyboard: false on page load, while subsequent modals triggered by the button follow the default settings with keyboard: true.

// } else {
    // show the help modal
    $('#help').modal({
        keyboard: false
    });

    // Use `one` to bind the event only once
    $('#help').one('hidden.bs.modal', function (event) {
        $('#help').modal('dispose');
    });
// }
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#help">
    Open Help
</button>


<div id="help" class="modal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">HELP</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>This is the Help modal</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>


<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>

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

Utilize React JS to parse and display a sophisticated JSON structure in a dropdown menu

Looking at the backend data structure provided, we have information on various courses in different departments. { "courseDetails" : [{"departmentId" : 105654, "courses" : [{"stream" : "science","courseIds" : ["104","105 ...

javascriptjsonnode.jsreactjsdropdown

Is it possible in Javascript to convert a table cell at the end of a row into its own separate table row?

I need to adjust the layout of a table I am pulling from a SharePoint site. Unfortunately, I cannot make changes to the original table, but I am hoping to use JavaScript to modify it on the page. The issue is that the table has a fixed width with evenly d ...

javascriptjqueryhtml

Searching for elements in Selenium using JavaScript's equivalent of findElement(by.className)

I need to locate an id tag within a class tag on an html page. driver.find_element(By.XPATH, "//div[@class='Content warning']/p").get_attribute("id") https://i.stack.imgur.com/NlU8t.png I successfully accomplished this with ...

javascriptseleniumautomation

Importing a module directly from the umd distribution may yield a distinct outcome compared to importing it

Within my Vite/Vue3 application, I am importing two identical umd.js files: One is located at node_modules/foo/bar/dist/foobar.umd.js (imported with alias @foo = node_modules/@foo). The second .umd.js file can be found at <root dir>/foo/bar/dist/ ...

javascriptvue.jsviteumdesmodules

One potential solution is sending a message to a user via a server using JavaScript on Node.js

Hey there, I've encountered a minor issue and would appreciate your help. Recently, I developed a weather program in NodeJs where users can search for the weather in their city. However, I'm facing a challenge with displaying the weather data to ...

javascriptnode.jsexpress

Chrome and Firefox: Images cling together

I've encountered an issue with my recently launched website. Some images in a grid appear to be stuck together, but this problem only occurs in Firefox and Chrome browsers. Oddly enough, zooming in to around 110% then back to 100% seems to temporarily ...

javascriptcsswordpressgoogle-chromefirefox

Transform the API response into a map in Angular version 16

When I receive a JSON response from a Java server, the structure looks like this: { "summary": { }, "runs": { "key_1": { "object_1": { }, "object_2": { ...

javascriptangulartypescript

Discovering all instances of a particular name in JSON using incremented values: a guide

I am looking to automatically detect every occurrence of a specific name in my JSON data. { "servergenre": "Classic Rock", "servergenre2": "pop", "servergenre3": "rock", "servergenre4": "jazz", "servergenre5": "80s", "serverurl": "http://www.n ...

javascriptjqueryjsonloops

Assign a variable to the result of ajax that remains unchanged until it is specifically invoked

I am currently working on the final part of my radio script, specifically focusing on the "last song" section. My goal is to retrieve a URL from an external PHP script, play the song, and once the song ends, I want to set a global variable equal to the cur ...

javascriptajaxvariables

Is it possible for me to define TypeScript interfaces to be used in vanilla JavaScript projects within VSCode?

While using the MS VisualCode editor, I am attempting to implement type checking in my Javascript code. I want to maintain the flexibility of Javascript while also benefiting from type checking interfaces and data structures. Based on the vscode documenta ...

javascripttypescriptinterfacevisual-studio-codetypechecking

Retrieve the Element from the Shadow DOM or leverage the main site's styles

I am currently involved in a project that utilizes Polymer (still on version 1.7, but we are planning to switch to a different technology instead of upgrading). My task involves exploring ways to integrate DynamicYield, a personalization platform that inse ...

javascriptcsspolymerpolymer-1.0shadow-dom

Leveraging Next.js ISR to pass extra information to the getStaticProps function from the getStaticPaths

Inside SingleBlogPost.jsx, the code for generating blog pages by their slug is as follows: export async function getStaticPaths() { const res = await fetch("http://localhost:1337/api/posts"); let { data } = await res.json(); const paths = data.map(( ...

javascriptreactjsnext.js

The challenge of having to manually refresh the browser each time an update is made using a put request in

When the user enters a name and number and clicks the add button, the new person's information is automatically added to the database. If the name already exists, a prompt will ask, 'name is already in the phonebook, do you want to update it with ...

javascriptnode.jsreactjsaxios

Retrieve items from the parent row of selected checkboxes

Within my table, I have the following row. <tr class="data_rows" ng-repeat='d in t2'> <td class="tds"> <input class='checkBoxInput' type='checkbox' onchange='keepCount(this)'></td> &l ...

javascripthtmlangularjs

Unable to retrieve the regex value with an alternate label

Here is a RegExp expression that I am currently using: const regex = new RegExp('<(.*)>' + text + '<(.*)>'); renderer.setProperty(node, 'innerHTML', node.innerHTML.replace(regex, '<$1>' + replaceTe ...

javascriptregextypescript

iOS now supports hardware-accelerated CSS3 transitions for seamless and

I can't seem to get hardware acceleration working with my translate3d for top/bottom positioning. What could be causing the issue? .image { background:yellow; -webkit-perspective: 1000; -webkit-backface-visibility: hidden; ...

javascriptioshtmlcsshardware-acceleration

Registering components globally in Vue using the <script> tag allows for seamless integration

I'm currently diving into Vue and am interested in incorporating vue-tabs into my project. The guidelines for globally "installing" it are as follows: //in your app.js or a similar file // import Vue from 'vue'; // Already available imp ...

javascriptvue.jsweb-component

Standardizing URLs with ExpressJS router

Seeking normalized/canonical URLs for a single page application running on an ExpressJS server. While the SPA is supported by a server-side router, templates can vary slightly for different app URLs. One particular difference is the presence of the <li ...

javascriptnode.jsexpressroutes

In order to trigger the mousedown event in Three.js, I have found that I need to click and gently move my cursor

There seems to be an issue with the code below, as the "intersects" variable does not populate with items in the onDocumentMouseDown event handler when I simply click an object. It only detects the object clicked when I click and slightly drag the mouse be ...

javascriptthree.jsmousedowntrackball

Populate vue-multiselect with links from the router

Is there a way to populate the vue-multiselect dropdown with <router-link> options? Typically, router links are defined declaratively in the <template>, but vue-multiselect relies on binding an array of options. Any suggestions on how to approa ...

javascriptvue.jsvuejs2vue-routervue-multiselect