Why slds-backdrop is not part of slds-modal in Modal

csslightning-design-systemslds

While reading generic documentation on modal box implementation, I found that there is usually one container class for it – .modal:

HTML

<!-- The Modal -->
<div class="modal">

  <!-- Modal content -->

</div>

CSS

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

In SLDS, however, a modal is built with 2 main elements: the modal box itself and the backdrop (fyi, some properties are skipped for brewity):

<section class="slds-modal slds-fade-in-open">
    <!-- Modal content -->
</section>
<div class="slds-backdrop slds-backdrop_open"></div>

Is there any specific reason to have these 2 components instead of incorporating the shaded backdrop as part of slds-modal?

Best Answer

Backdrops (or overlays) are not always a mandatory element when using modals. Additionally, the backdrop of modals doesn't always need to be the same as the one used in SLDS, thus, giving us the flexibility to adapt how modals are presented.

I personally, much prefer this, as it allows me to either use the:

<div class="slds-backdrop slds-backdrop_open"></div> element for a grayish semi transparent background, or I can create my own backdrop, thus leaving the modal as a separate component.

Different css framworks will adopt different practices, I haven't found a specific reason why slds has opted on this approach though.

Related Topic