3

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?

2
  • That is a good question Eduard, have you checked the SDLS documentation about their approach? Commented Aug 18, 2021 at 15:53
  • @JefersonChaves, yes I read their doc but I couldn't find the reasoning behind that approach. Anyway, glls has shed some light on it.
    – Eduard
    Commented Aug 19, 2021 at 8:25

1 Answer 1

4

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.

1
  • 1
    Thank you, @glls! That now makes sense to me.
    – Eduard
    Commented Aug 19, 2021 at 8:27

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .