Bootstrap 3 nested modals – backdrop z-index and close modal on click

Question

I’m working on a web application (Asp.Net MVC 5) where the user has to crate many data records with mappings to other records. The user must be able to create a mapping to an existing or newly created record.

A typical case would be the creation of an address:

User opens the site to create an address
He enters the normal fields like street and street no etc.
He can select an existing city (in which the address is located) from a table
If the required city does not already exist he can create a new city
… For the city, he can select a country or create on (same as for address and city)

The selection is implemented using bootstrap modals. Pressing on a select button (like select city) shows a modal containing a table showing all the selectable records in a table. The modal with the table contains an add new button to add new entities, which opens another modal.

To be able to reuse the views I’ve split the code in partial views like this:

_CreateAddress => Contains only the form to create an address
_CreateAddressModal => A modal containing _CreateAddress
_SelectAddressModal => A modal containing a table to showing all addresses. The modal contains also _CreateAddressModal which will be displayed when the user clicks on the add new button
_CreateCity => Contains only the form to create a city
_CreateCityModal => A modal containing _CreateAddressModal
_SelectCityModal => A modal containing a table to showing all cities. The modal contains also _CreateCityModal which will be displayed when the user clicks on the add new button

…and so on

I’ve two problems:

Clicking on a backdrop does not close the open modal
The backdrop of the topmost modal has a lower z-index than the all other modals and does therefore not hide the other modals

I’ve tried to set the z-index of the backdrops on modal show, to make sure they hide the other modals but this didn’t work => the backdrops get displayed above the current modal.

Here is a fiddle showing the problem: jsFiffle

SO does not let me link to a JSFiddle without adding the code to the question, so here is the code:

HTML:



    
        
            
                
                Create Address
            
            
                
                              Placeholder Here is the form to create an address
                    
                        
                
                
            
        
    




    
        
            
                
                Select a City
            
            
                
                              Placeholder Here is a table to select an existing city
                        
                
                
                
            
        
    




    
        
            
                
                Create City
            
            
                
                              Placeholder Here is the form to create a city
                    
                        
                
                              
              
              
                  
                      
                          
                              
                              Select a Country
                          
                          
                              
                                  Placeholder Here is a table to select an existing country
                              
                              
                              
                              
                          
                      
                  
              
              
              
              
                  
                      
                          
                              
                              Create Country
                          
                          
                              
                                  Placeholder Here is the form to create a country

JS:

var zIndex = 10000;
    // Displys the given modal on top of everything else
    // modal: The modal to display as jQuery object
    // Does not work => remove thw first two lines to see the problem
    function displayModalOnTop(modal) {
    // remove me
    modal.modal('show');
    return;
    // end remove
        zIndex += 2;
        modal.css('z-index', zIndex);
        modal.modal('show');
        setTimeout(function () {
            $('.modal-backdrop').not('.modal-stack').css('z-index', zIndex - 1).addClass('modal-stack');
        }, 0);
    }

$(function(){
  $('#openModal').on('click', function(){
      displayModalOnTop($('#CreateAddress'));
  });

  // generic close modal handler
  $('.modalCloseButton').on('click', function(){
      var $this = $(this);
      var modalId = $this.attr('data-modalid');
      $('#' + modalId).modal('hide');
  })

  // Select city click
  $('#selectCityButton').on('click', function(){
      displayModalOnTop($('#SelectCity'));
  });

  // Create city click
  $('#createCityButton').on('click', function(){
      displayModalOnTop($('#CreateCity'));
  });

  // Select country click  
  $('#selectCountryButton').on('click', function(){
      displayModalOnTop($('#SelectCountry'));
  });

  // Create country click
  $('#createCountryButton').on('click', function(){
      displayModalOnTop($('#CreateCountry'));
  });
});

CSS:

.modal.fullScreen {
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-top: 48px;
}
.modal.fullScreen .modal-content {
  height: auto;
  min-height: 100%;
  border-radius: 0;
}
.modal.fullScreen .modal-body.noPadding {
  padding: 0;
}
.modal.fullScreen .modal-dialog {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}
.modal.fullScreen .modal-header {
  background-color: #3276b1;
  color: #fff;
}
.modal.fullScreen .modal-header .close {
  color: #FFF;
  text-decoration: none;
  cursor: pointer;
  opacity: 0.4;
  font-size: 30px;
}
.modal.fullScreen .modal-header .close:hover {
  opacity: 1 !important;
}

musium · Accepted Answer

The problem was that the modal covered the hole screen. The backdrop was visible due to the margin of the modal but was not clickable because it was totally covered by the modal. Removing the margin from the modal and adding it to the modal dialog fixed the problem.

Bootstrap 3 nested modals – backdrop z-index and close modal on click

Answers (2)

Related Questions