← Snippets - Styles

Fix Modal Backdrop Layering

ISSUE

Links that trigger a disclaimer from within a modal sets the disclaimer’s backdrop under the modal instead of covering it.

Bootstrap 5

HTML

  • add modal--content class to any dev modals that may include a disclaimer link

JavaScript

  • add to script.js in the ’load’ event listener
// Don't conflict with Disclaimer modals if they are triggered from within a modal
document.querySelectorAll('.modal--content').forEach(mc => {
  mc.addEventListener('shown.bs.modal', function () {
    const modalBack = document.querySelector('.modal-backdrop');
    if (modalBack){
      modalBack.classList.add('modal--content__backdrop');
      modalBack.classList.remove('modal-backdrop');
    }
  })
})

// Set focus to disclaimer modal if opened from a content modal to allow closing the disclaimer with the Escape key
document.querySelectorAll('.modal--content a').forEach(lnk => {
  if (lnk.dataset.disclaimerId != 'null' || (lnk.dataset.linkTypeId == 'email' && emailDisclaimers)){
    lnk.addEventListener('click', () => {
      setTimeout(function() {
        document.querySelector('.banno-disclaimer').focus();
      }, 500)
    })
  }
})

SCSS

  • Extends the modal-backdrop class to modal--content__backdrop that’s added in JS above
  • Sets the z-index of the disclaimer’s backdrop higher than the content modal
.modal--content{
  z-index: 1052;

  &__backdrop{
    @extend .modal-backdrop;  // get same styles as the default backdrop

    // set above modal backdrop for disclaimers that are opened within a modal
    ~ .modal-backdrop{
      z-index: 1053;
    }
  }
}

Bootstrap 4

SCSS - modals.scss

.modal {
  z-index: $zindex-modal + 1; // manually set zindex to allow disclaimer to work
  &-backdrop {
    z-index: $zindex-modal; // since the fullscreen-modals don't have backdrops, this is to help disclaimers from fullscreen-modals
  }
}
.bootbox.modal, .feature-modal-space__modals .modal { //first class is disclaimer modals, second class is "regular" non-fullscreen modals
  z-index: $zindex-modal + 1; // manually set zindex to allow disclaimer to work
}

Example Sites

Tags: bs4, bs5, javascript, js, modal, disclaimer, scss, sass