Displaying a bootbox modal on top of another modal will not cause the modal in the background to appear dim

Currently, I am utilizing bootbox for my project and have encountered an issue. I have a button within my modal that, when clicked, should open another modal. However, the problem is that the background behind the two modals does not dim properly; instead, it just becomes darker. How can I resolve this issue?

Below is a snippet of my code for reference:


$('#new-btn').click(function () {
        new_room_form = bootbox.dialog({
            title: "New room",
            message: 
                '<div class="row">' +
                    '<div class="col-md-12">' +
                    '<form>' +
                        '<fieldset style="padding: 20px">' +
                            '<legend>Example:</legend>' +
                            '<div class="form-group">' +
                                '<button class="btn btn-primary" id="add">Add</button>' +
                            '</div>' +

                        '</fieldset>' +
                    '</form>' +
                '</div>' +
            '</div>',
            buttons: {
                cancel: {
                    label: "Cancel",
                    className: "btn btn-default"
                },
                add: {
                    label: "Add",
                    className: "btn btn-primary",
                }

            }
    }); // end bootbox dialog      

     $('#add').on('click', function(response) {
            bootbox.alert("Hello world!", function() {
            });
             return false;
        }); 
    });

Answer №1

Bootbox serves as a convenient library that simplifies the use of Bootstrap modals. However, it inherits all of Bootstrap's restrictions, including:

Lack of support for multiple open modals

It's important not to display a modal while another one is already visible. Managing multiple modals simultaneously will require custom implementation.

http://getbootstrap.com/javascript/#modals

In essence, handling this issue falls on your shoulders. The overlapping may be due to the overlays sharing the same absolute positioning and z-index values.

Currently, there isn't a direct way in Bootbox or Bootstrap to alter the modal's backdrop. The closest option is to disable the backdrop by including backdrop: false in the configuration.

Answer №2

Great insights can be found at: https://example.com/multiple-modals-overlay and also here: Multiple modals overlay

Implement this code snippet in your HTML:

 <script type="text/javascript">      
    $(document).on('show.bs.modal', '.modal', function () {
      var zIndex = 1040 + (10 * $('.modal:visible').length);
      $(this).css('z-index', zIndex);
      setTimeout(function () {
        $('.modal-backdrop').not('.modal-stack').css('z-index', zIndex - 1).addClass('modal-stack');
      }, 0);
    });
  </script>

Detailed explanation: When a modal is shown, the script counts the number of open modals and calculates a z-index for the backdrop accordingly (1040 + (10 * n)), where n represents the number of open modals. The setTimeout function is utilized to account for element creation timings.

Answer №3

To solve this issue, I took a different approach by adjusting the z-index of the bootbox modal and backdrop to ensure they appeared above the standard modal z-index of 1050.

First, I created two new CSS classes:

.bootbox.modal {
    z-index: 1070 !important;
}
.modal-backdrop.bootbox-above-modal {
    z-index: 1060 !important;
}

Next, I disabled the default bootbox modal backdrop and implemented my own using jQuery:

bootbox.dialog({
    message: 'My alert!',
    backdrop: false,
    onShow: e => $('body').append('<div class="modal-backdrop fade show bootbox-above-modal"></div>'),
    onHide: e => $('.modal-backdrop.bootbox-above-modal').remove()
})

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

Convert your Airbnb short link into the full link

I am currently developing an application that utilizes Airbnb links as part of its input. So far, I have identified two types of links: Long form, for example: . These are commonly used on desktop. Short form, such as: . These shorter links are often shar ...

divs adjust their size based on how many are placed in a single row

I'm in the process of developing an online editing tool, and I'm interested to know if it's feasible to adjust the size of a <div> based on the number of visible div elements. For instance, I have a row with three columns, each set at ...

Sending data using the POST method

I am encountering difficulties when passing variables to a submit file through AJAX, particularly when the variable contains the "&" character. This is causing issues because it interferes with the string formatting, for example: id=1&name=blabla&a ...

"Node.js Conditional Promise: A guaranteed commitment based on specified

How can a conditional promise be called without nesting promises and executing the remaining code regardless of whether the condition is met? findAllByServiceProviderLocationId(serviceProviderLocationId, supplierId) .then(result => { ...

Assigning ng-Attributes using vanilla JavaScript

My journey with coding Angular started not too long ago. I have a HTML structure with various divs and classes. I am looking to loop through these classes and add a tooltip to a specific div within each class. Rather than hardcoding the Angular attributes ...

`Should I bother converting an array to a set for searching in NodeJS?`

I'm curious to find out if converting an array into a set is worth it for faster searching in NodeJS. In my scenario, the search operation is performed frequently, but not on large datasets (usually up to ~2000 items in the array). The goal is to lo ...

Developing a universal.css and universal.js file for a custom WordPress theme

I have developed a custom WordPress theme with an extensive amount of code. To manage the numerous style and script files, I have segmented them into multiple individual files. To integrate all these files into my template, I utilized the following code w ...

Exploring Twig variables in Node.js with the node-twig package

Despite following the documentation meticulously, and experimenting with various methods, I am still unable to achieve success. I have attempted using the code snippet below, trying to reference the variable in the main file like this: // None of the opti ...

Utilizing Vector3 for Parametric Geometry calculations

As I update a script to a newer version of three.js, I encountered an issue with ParametricGeometry. The error message "THREE.ParametricGeometry: Function must now modify a Vector3 as third parameter" keeps appearing. Below is the section of code causing t ...

Unable to reach axios within the vuex Store

Below is the code snippet from my store.js file: import Vue from 'vue'; import Vuex from 'vuex'; import axios from 'axios/dist/axios'; import VueAxios from 'vue-axios' const api = axios.create({ baseURL: 'my ...

Adding information into a separate row via JavaScript

When using XMLHttpRequest to retrieve data from a custom URL, specifically mocki.io and fake JSON, I am encountering an issue where all data elements (element.name and element.city) are being placed in one table row. Ideally, I would like each pair of name ...

What is the best way to run a code block every time a new reaction is added in discord.js?

I need assistance with creating a bot that can count the number of specific reactions ('⚪') to a message within a specified time frame. Additionally, I want to be able to skip the remaining time by reacting to a different emoji ('X'). ...

What is the process for transforming MongoDB timestamps into a readable date format?

My createdAt property is structured as follows: 2020-03-30T12:44:20.221+00:00. I am looking to convert it to something similar to 30 march 2020, excluding the time and timezone information. Is there a way to achieve this? Thank you. ...

Easily transfer files without the need for a complete page refresh

The Strategy To ensure a seamless user experience, my goal is to upload files without triggering a full page refresh. All uploaded files will be temporarily stored, either in session or cookies, until the user successfully completes all form fields. File ...

Tips for styling JavaScript code within an HTML document

I have developed a word completer using Bootstrap for styling, but I am facing issues in the output. The program is built using jQuery and JavaScript, and the results are displayed in a list format. However, I am unsure how to resolve this problem. https: ...

Creating a calculator with JavaScript event listeners - easy steps to follow!

I'm currently working on a JavaScript calculator project and facing challenges in understanding how to create variables for storing targeted DOM elements, input/output values, and adding event listeners to retrieve data from buttons upon clicking. I ...

Different ways to showcase Ajax-returned JSON data within a Bootstrap table

I am currently working on a Cordova mobile app that utilizes RESTful web services to retrieve JSON data using an AJAX call as shown below. I'm looking for guidance on how to present this JSON data in a Bootstrap table with padding. var datanew = "pa ...

Step-by-step guide on running two JavaScript codes sequentially to ensure accurate results

I am currently working on an MVC project where I need to display the user's current location city in the top right corner of a webpage. The first javascript code fetches the city name, and the second one retrieves the weather conditions of that city. ...

The JS content failed to load into the HTML page

I need help creating a workout tracker using two JS files. The main.js file is responsible for loading content from the second file (workoutTracker.js) into the index.html. However, I'm facing an issue where the content is not being displayed on the p ...

What is the best way to detect when I switch to a different tab than a specified tab using HTML and jQuery?

Here is the HTML code I am working with: <div id="tabsWithStyle"> <ul> <li><a href="#data1">Data 1 TAB</a></li> <li><a href="#data2">Data 2 TAB</a></li> <li>< ...