modal bottom sheet

modal_bottom_sheet.html

<button id="openButton">Modalni ochish</button>
<div class="bottom-sheet" id="bottomSheet" >
  <div class="sheet-content">
    <div class="sheet-header">
      <h3>Modal Title</h3>
    </div>
    <div class="sheet-body"> 
      <p>Что такое Lorem Ipsum?
Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.</p>
         <p>Что такое Lorem Ipsum?
Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.</p>
         <p>Что такое Lorem Ipsum?
Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.</p>
    </div> 
  </div>
</div>

modal_bottom_sheet.js

class BottomSheet {
  constructor({ target, show, hide, outsideHide = false, height = "50%", duration = "300" }) {
    this.modal = document.querySelector(target);
    this.showTrigger = document.querySelector(show);
    this.hideTrigger = document.querySelector(hide);
    this.outsideHide = outsideHide;
    this.height = height;
    this.animationDuration = duration;

    if (!this.modal) {
      console.error("Modal target not found");
      return;
    }

    this.modal.style.display = "none";
    this.init();
  }

  init() {
    this.modal.style.height = this.height;
    this.modal.style.width = "100%";
    this.modal.style.position = "fixed";
    this.modal.style.bottom = "0";
    this.modal.style.left = "0";
    this.modal.style.borderTopLeftRadius = "20px";
    this.modal.style.borderTopRightRadius = "20px";
    this.modal.style.background = "#ffffff";
    this.modal.style.boxShadow = "0px -10px 20px rgba(0, 0, 0, 0.1)";
    this.modal.style.transition = `transform ${this.animationDuration}s ease-in-out`;
    this.modal.style.overflow = "scroll";
    this.modal.style.transform = "translateY(100%)";
    this.modal.style.zIndex = "1000";

    if (this.showTrigger) {
      this.showTrigger.addEventListener("click", () => this.open());
    }

    if (this.hideTrigger) {
      this.hideTrigger.addEventListener("click", () => this.close());
    }

    if (this.outsideHide) {
      document.addEventListener("click", (e) => {
        if (!this.modal.contains(e.target) && e.target !== this.showTrigger) {
          this.close();
        }
      });
    }
  }

  open() {
    this.modal.style.display = "block";
    setTimeout(() => {
      this.modal.style.transform = "translateY(0)";
    }, 0);
  }

  close() {
    this.modal.style.transform = "translateY(100%)";
    setTimeout(() => {
      this.modal.style.display = "none";
    }, this.animationDuration * 1000);
  }
}

// Usage Example
const bottomSheet = new BottomSheet({
  target: "#bottomSheet",
  show: "#openButton",
  hide: "#closeButton",
  outsideHide: true,
  height: "40%",
  duration: "0.3"
});