Displaying several modals with a backdrop on top of one another using Bootstrap

My issue involves two modals: one that displays appointment information with a delete button, and another that serves as a warning before deleting. I want the delete-warning modal to overlay a backdrop on the modal beneath it, graying it out. However, both modals end up on top of the backdrop.

I am unable to access the div with the backdrop class, so I cannot give the backdrop of the delete-modal a different class to distinguish between the two backdrops. Is there a different approach I can take?

Delete-Modal:

<div class="modal fade delete-modal" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="deleteModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
  <div class="modal-header">
    <h5 class="modal-title" id="deleteModalLabel">Achtung!</h5>
    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body" id="deleteModalBody">
    
  </div>
  <div class="modal-footer">
    <button type="button" id="deleteButton" class="btn btn-danger">Eintrag löschen</button>
    <button type="button" id="cancelButton" class="btn btn-secondary" data-dismiss="modal" aria-label="Close">Abbrechen</button>
    <button type="button" id="okButton" class="btn btn-primary" data-dismiss="modal" aria-label="Close">OK</button>
  </div>
</div>

Info-Modal:

{# Modal #}
<div class="modal fade" id="terminModal" tabindex="-1" role="dialog" aria-labelledby="terminModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
  <div class="modal-header">
    <h5 class="modal-title" id="terminModalLabel">Lorem</h5>
    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
    <div class="modal-body">

    <div class="row pad-bottom">
        <div class="col-sm">
        
        {# Datum #}
        
            <label for="datum" class="label-lg">Datum</label><br>
            <input class="form-control-plaintext" readonly type="text" id="datum" name="datum" value="01.01.1970">
            
            
        </div>
        <div class="col-md align-self-end">
        
        {# Tageszeit#}
        
            <input class="form-control-plaintext" readonly type="text" name="tageszeit" id="tageszeit" value="dolor">
            
            
        </div>
    </div>
    <div class="row pad-bottom">
        <div class="col-lg">
        
        {# Intervall #}

            <label for="intervall" class="label-lg">Intervall</label><br>
            <input type="text" readonly class="form-control-plaintext" id="intervall" name="intervall" value="sit">
            
        </div>
    </div>

    <div class="row pad-bottom">
        <div class="col-lg">
        
        {# Azubi-Liste #}
        
            <div class="card">
                <div class="card-header align-middle">
                    Teilnehmer
                </div>
                <div class="card-body overflow-auto">
                    <div id="azubis" class="container-fluid">

                    </div>              
                </div>
            </div>
        
        </div>
    </div>

</div>
<form method="post" action="{{ route("termin/edit") }}" id="submitForm">
    <div class="modal-footer">
        <button id="einzelTerminSelect" name="einzelTerminSelect" type="submit" class="btn btn-primary">Bearbeiten</button>
        <button id="gruppenTerminSelect" name="gruppenTerminSelect" type="submit" class="btn btn-primary">Bearbeiten für alle Teilnehmer</button>
        <input type="button" value="löschen" class="btn btn-danger" data-toggle="modal" data-target="#deleteModal" onclick="confirmDelete('submitForm')">

        <input type="hidden" id="kalenderDel" name="kalenderDel">
    </div>
</form>
</div>

Answer №1

By utilizing the nth-of-type() selector in my CSS, I successfully targeted a specific backdrop element. I adjusted the z-index of the backdrop for the delete-modal to be slightly higher than the standard modal, and increased the z-index of the delete-modal even further.

.delete-modal {
    z-index: 1060;
}
.modal-backdrop:nth-of-type(3) { 
    z-index: 1050;
}

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

How can I efficiently load AJAX JSON data into HTML elements using jQuery with minimal code?

I have successfully implemented a script that loads an AJAX file using $.getJSON and inserts the data into 2 html tags. Now, I want to expand the JSON file and update 30 different tags with various data. Each tag Id corresponds to the key in the JSON strin ...

Is there a way to extract a value from a string and store it as a variable in

Creating a functionality to resize images from WordPress. The goal is to extract the width and height values from a string similar to this: <img src="/path/img.jpg" width="600" height="400" /> Next step is to remove the specific values (600 and 40 ...

Position the button at the bottom of the page with MUI v5 in a React application

How can I ensure the button is always positioned at the center bottom of the page, regardless of the content height? This is a snippet from my code: const useStyles = makeStyles({ button: { bottom: 0, right: 0, position: "absolute" ...

Stop the inheritance of CSS and JavaScript in ASCX files

Currently, I have an application that consists of only one aspx page called Default.aspx. This page dynamically loads .ascx controls as required, all of which utilize the same JS and CSS file. I am now considering implementing Bootstrap on specific control ...

Create a personalized message in PHP that corresponds to the specific row number

I created a table to show data sourced from a database. I decided to add a column that will display a message based on the row number being displayed. <form name="afisare1" method="POST" > <input type="submit" name="opt1" value="OK"/> ...

Changing the border color of material ui Rating stars: A guide

I am struggling to change the border color of stars in Material UI Rating because my background color is black, making it difficult to see when the star is empty! Here's the code snippet: import Rating from '@material-ui/lab/Rating'; import ...

How to transform HTML content into plain text format while retaining the HTML tags

transform this into something like this2 I'm attempting to convert text containing html tags (p, ol, b) into plain text format (similar to the outcome of running a code snippet) - I've experimented with the following code in .net core but it only ...

Tips for showing data from Ajax responses on an HTML page

In my code, there are two JavaScript functions: The function fetch_items is responsible for returning data in the form of stringvalue. On the other hand, the function extract_items($arr) passes values to the fetch_items function. function fetch_items ...

Multiple hover highlighting techniques

Recently, I came up with an interesting concept for providing user feedback. My idea is to have a menu where hovering over it highlights an image that corresponds to the menu item, or vice versa - hovering over an image will highlight the corresponding men ...

The click event is activated following the :active selector being triggered

My Angular application features a button with a slight animation - it moves down by a few pixels when clicked on: &:active { margin: 15px 0 0 0; } The button also has a (click)="myFunction()" event listener attached to it. A common issue arises w ...

Is there a way to alter the CSS padding class for collapsed elements?

I've created a navbar by following Bootstrap's tutorial, but I'm facing an issue with the padding. I used the Bootstrap class "pe-5" to add padding to a form within the navbar so that it aligns to the right with some space from the screen ed ...

Avoiding the use of a particular URL when using this.router.navigate() in AngularJs

In my angularJS registration form, I am using a bootstrap template for the design. The URL path to access the form page is http://localhost:4200/signup <form method="post" (submit)='register(username.value,email.value,password.value)'> ...

Having issues with the jQuery .css function?

I need help with hiding and showing tabs on my webpage based on a successful login. I have tried various methods, such as setting the tab to be hidden by default in the HTML code and then using JavaScript to display it upon login. However, none of these me ...

How to Achieve an Overlapping Background Image Effect with Divs Using HTML and CSS

Is it possible to achieve the following scenario using just HTML and CSS? I want to display the background image of my HTML body through a clipped div. Keep in mind that the final website needs to be responsive (mobile-first), so any solution should accom ...

Height of Hover Background Color in WordPress Menu

Greetings! Welcome to my website I'm in the process of modifying the hover color for the top menu, and I've managed to change it successfully. However, I would like the hover effect to cover the entire height of the menu, as right now it's ...

Obtaining values from alternating nodes in a SQL query

Can anyone help with extracting values of odd and even nodes in SQL from this XML example? declare @htmlXML xml = N'<div class="screen_specs_container "><div class="left_specs_container">Compatibility:</div><div class="right_spe ...

What is the best way to exclude the "table" property from a button inside a row of a table?

I'm currently working with bootstrap and have implemented a table with the property "table" to create a light background for the data pulled from a database. The design looks great, except for when I try to insert a button in each row for editing purp ...

Retrieve only the most recent input value

Currently, I am working with a text input to capture user input. As of now, here is my code snippet: $(myinput).on('input', function() { $(somediv).append($(this).val()); }); While I want to continue using the append function, I am facing an i ...

issues with the functionality of bootstrap modal

I'm currently working on a project where I need to set up a modal popup using bootstrap. The website I'm working on is organized by departments, so the only part of the code that I have control over is the main body of the site. I have included t ...

Guide on implementing iterative data path in v-for loop using Vue

I'm just starting out with Vue and I want to use image file names like "room1.jpg", "room2.jpg", "room3.jpg" in a loop Below is my code, where the second line seems to be causing an issue <div v-for="(p,i) in products" :key="i"> <img src ...