html – Scrollable mode where X is left above the modal.

Trying to create a Y scroll model. Its width is not fixed, it can be narrow on large screens, or mostly screen width on small screens. I want to keep the X right above to close the modal, even if the user scrolls down a few pages of the modal (because the modal is tall), they will not have to go backwards to close the modal.

Due to the changing width of the modal, no one can say just right: 123px, or 10.

<div class="ModalBlur">
  <div class="Modal">
    <div class="close">X</div>
    <div>This modal is different widths.
    <br>Depending on the screen.
    <br>you view it on.
    <br>It may
    <br>get so long
    <br>you have to scroll.</div>
  </div>
</div>
.ModalBlur {
    z-index: 10;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #00000040;
    overscroll-behavior: contain;
}

.Modal {
  position: relative;
  background: white;  
  padding: 16px;
    margin: 16px;
    max-height: calc(100vh - 124px);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.close {
  float: right;
  color: red;
  font-size: 48px;
  position: fixed;
}

Current result:

X wants to be on the top right, something like the bottom. Even if the modal is too long and someone has to screw Y.
Enter image description here.

Leave a Reply

Your email address will not be published.