<div x-data="modal" class="flex gap-6">
  <button class="btn-primary-outlined" @click="openModal">Form Modal</button>
  <template x-teleport="body">
    <div class="fixed inset-0 z-[999] hidden overflow-y-auto bg-[black]/60 dark:bg-neutral-40/80" :class="isOpen && '!block'">
      <div class="flex min-h-screen items-center justify-center px-4 text-neutral-700 dark:text-neutral-20" @click.self="closeModal">
        <div x-show="isOpen" x-transition x-transition.duration.300 class="panel my-8 w-full max-w-3xl overflow-hidden rounded-lg border-0 bg-neutral-0 p-3 dark:bg-neutral-904 sm:p-4 md:p-6 lg:p-8">
          <form>
            <div class="mb-4 flex items-center justify-between bb-dashed-n30">
              <h4>Subscribe</h4>
              <i class="las la-times cursor-pointer text-xl" @click="closeModal"></i>
            </div>
            <p>To subscribe to this website, please enter your email address here. We will send updates occasionally.</p>
            <input type="text" class="my-5 w-full rounded-xl border focus:border-primary-300 border-neutral-30 bg-neutral-20 px-4 py-2.5 lg:px-6 lg:py-4 dark:border-neutral-500 dark:bg-neutral-903 lg:my-8" placeholder="Email Address..." required />
            <div class="flex gap-4 lg:gap-6">
              <button class="btn-primary" type="submit">Subscribe</button>
              <button class="btn-primary-outlined" type="reset" @click="closeModal">Cancel</button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </template>
</div>
                  

<div x-data="modal" class="flex gap-6">
  <button class="btn-default-outlined" @click="openModal">Scroll Body</button>
  <template x-teleport="body">
    <div class="fixed inset-0 z-[999] hidden overflow-y-auto bg-neutral-900/60 dark:bg-neutral-40/80" :class="isOpen && '!block'">
      <div class="flex min-h-screen items-center justify-center px-4 text-neutral-700 dark:text-neutral-20" @click.self="closeModal">
        <div x-show="isOpen" x-transition x-transition.duration.300 class="panel my-6 h-full w-full max-w-3xl rounded-lg border-0 bg-neutral-0 dark:bg-neutral-904 lg:my-8">
          <div class="px-6 pt-6 lg:px-8 lg:pt-8">
            <div class="flex items-center justify-between border-b border-dashed border-primary-100 pb-6">
              <h4>Subscribe</h4>
              <i class="las la-times cursor-pointer text-xl" @click="closeModal,document.documentElement.style.overflowY='auto'"></i>
            </div>
          </div>
          <div class="px-6 pt-6 lg:px-8">
            <p>
              Lorem, ipsum dolor sit amet consectetur adipisicing elit. Neque qui magni illum dolorem veritatis tenetur! Possimus fugiat eveniet hic totam commodi itaque quae eum labore inventore nostrum, minus error deserunt odit ex repellat consequatur reiciendis corrupti.
              Corrupti reprehenderit minus ipsa in facilis, mollitia ex temporibus cupiditate doloremque, officia rem animi nobis asperiores earum adipisci? Omnis aspernatur iusto quaerat tenetur itaque quo iste nihil, error nesciunt, facere natus minima ab perferendis quis,
              reiciendis dolor repellendus sit commodi nulla. Impedit nihil commodi praesentium corporis accusantium autem mollitia velit dicta eligendi porro. Iusto praesentium sit atque repudiandae quos qui repellat eos nobis reiciendis omnis quisquam, aspernatur deleniti, odio
              blanditiis repellendus eveniet id laborum aperiam maxime velit a voluptatem dolore esse! Autem corporis deleniti eius. Illum, itaque veniam provident voluptatibus voluptatem aperiam, ipsum minus earum, nesciunt rem suscipit. Ipsam illum perspiciatis dolorem, a dicta
              sit suscipit iste accusantium reiciendis veniam voluptatem placeat nesciunt molestiae, velit nemo, unde necessitatibus dolor. Sed voluptate repellendus repudiandae dolore odio? Commodi placeat corporis cumque pariatur hic assumenda veritatis, quidem provident alias
              nam. Ad cupiditate vitae assumenda ipsa temporibus suscipit libero adipisci commodi, tempora itaque? Vel voluptate sint nemo. Vel deleniti voluptatum delectus aperiam numquam quibusdam iure nobis repudiandae, expedita ratione quaerat facere reprehenderit eaque quae
              aspernatur animi obcaecati sunt. Adipisci, molestias veritatis assumenda quisquam, quas, praesentium doloremque blanditiis odio repellendus minima impedit modi temporibus eveniet perspiciatis laboriosam dolore quam quae odit nam enim sint. Accusamus neque fugit earum
              nemo beatae est et iusto eos, necessitatibus dignissimos! Nihil aperiam numquam inventore neque voluptatem ad deserunt rem exercitationem iste sit ullam nisi repellat quaerat in consectetur corporis doloribus, asperiores modi. Veniam, blanditiis cupiditate tempora
              unde perferendis officiis laudantium reiciendis, suscipit quis cumque ipsa, magnam nobis harum alias consectetur reprehenderit error eius ullam provident quod minus! Ipsam porro repellendus blanditiis qui earum adipisci. Esse totam pariatur ab amet quaerat, sit
              perspiciatis itaque asperiores enim laborum, non temporibus iste ipsum expedita, consequuntur id nam dolores maxime corrupti ex vitae quis eius sint. Ipsum blanditiis culpa illo debitis harum et fugiat velit beatae. Molestiae assumenda incidunt, perferendis ex dolorem
              perspiciatis nihil, similique mollitia alias eos ratione veniam. Totam officiis harum at architecto, nesciunt nobis perferendis excepturi nihil nam labore, officia, expedita consequuntur laborum neque aspernatur tempora aliquid? Accusantium quaerat suscipit laborum
              delectus hic nisi repellendus alias fugit dolore incidunt maiores ullam id aut esse, ipsum quidem nobis molestias totam? Facilis hic at dolorum, tempora ut reiciendis exercitationem iure nobis magnam non natus expedita quo, voluptatem eum. Facere, necessitatibus
              debitis. Quod, minus reprehenderit quibusdam quaerat provident odit asperiores ducimus optio eius dolores veniam explicabo impedit corporis sit quo enim aut eaque, dignissimos qui. Quae facere tenetur sed, distinctio officiis exercitationem assumenda eveniet vitae
              natus suscipit repellendus quibusdam corporis eos, dolorem voluptatem nulla facilis eaque voluptatibus. Iusto doloribus beatae qui earum cum tempora illo similique quaerat provident totam asperiores quisquam modi sint culpa vero praesentium est dolorem dolore
              assumenda neque atque, possimus vitae amet. Voluptatibus fugit nulla nobis suscipit omnis non expedita explicabo corporis sapiente natus? officiis laudantium reiciendis, suscipit quis cumque ipsa, magnam nobis harum alias consectetur reprehenderit error eius ullam
              provident quod minus! Ipsam porro repellendus blanditiis qui earum adipisci. Esse totam pariatur ab amet quaerat, sit perspiciatis itaque asperiores enim laborum, non temporibus iste ipsum expedita, consequuntur id nam dolores maxime corrupti ex vitae quis eius sint.
              Ipsum blanditiis culpa illo debitis harum et fugiat velit beatae. Molestiae assumenda incidunt, perferendis ex dolorem perspiciatis nihil, similique mollitia alias eos ratione veniam. Totam officiis harum at architecto, nesciunt nobis perferendis excepturi nihil nam
              labore, officia, expedita consequuntur laborum neque aspernatur tempora aliquid? Accusantium quaerat suscipit laborum delectus hic nisi repellendus alias fugit dolore incidunt maiores ullam id aut esse, ipsum quidem nobis molestias totam? Facilis hic at dolorum,
              tempora ut reiciendis exercitationem iure nobis magnam non natus expedita quo, voluptatem eum. Facere, necessitatibus debitis. Quod, minus reprehenderit quibusdam quaerat provident odit asperiores ducimus optio eius dolores veniam explicabo impedit corporis sit quo
              enim aut eaque, dignissimos qui. Quae facere tenetur sed, distinctio officiis exercitationem assumenda eveniet vitae natus suscipit repellendus quibusdam corporis eos, dolorem voluptatem nulla facilis eaque voluptatibus. Iusto doloribus beatae qui earum cum tempora
              illo similique quaerat provident totam asperiores quisquam modi sint culpa vero praesentium est dolorem dolore assumenda neque atque, possimus vitae amet. Voluptatibus fugit nulla nobis suscipit omnis non expedita explicabo corporis sapiente natus?
            </p>
          </div>
          <div class="flex gap-4 px-6 py-6 lg:gap-6 lg:px-8 lg:py-8">
            <button class="btn-primary">Subscribe</button>
            <button class="btn-primary-outlined" @click="closeModal,document.documentElement.style.overflowY='auto'">Cancel</button>
          </div>
        </div>
      </div>
    </div>
  </template>
</div>
                  

<div x-data="modal" class="flex gap-6">
  <button class="btn-default-outlined" @click="openModal">Scroll Paper</button>
  <template x-teleport="body">
    <div class="fixed inset-0 z-[999] hidden overflow-y-auto bg-[black]/60 dark:bg-neutral-40/80" :class="isOpen && '!block'">
      <div class="flex min-h-screen items-center justify-center px-4 text-neutral-700 dark:text-neutral-20" @click.self="closeModal">
        <div x-show="isOpen" x-transition x-transition.duration.300 class="panel h-full max-h-[95vh] w-full max-w-3xl rounded-lg border-0 bg-neutral-0 dark:bg-neutral-904">
          <div class="px-6 pt-6 lg:px-8 lg:pt-8">
            <div class="flex items-center justify-between border-b border-dashed border-primary-100 pb-6">
              <h4>Subscribe</h4>
              <i class="las la-times cursor-pointer text-xl" @click="closeModal"></i>
            </div>
          </div>
          <div class="h-[60vh] overflow-y-auto px-6 pt-6 lg:px-8">
            <p>
              Lorem, ipsum dolor sit amet consectetur adipisicing elit. Neque qui magni illum dolorem veritatis tenetur! Possimus fugiat eveniet hic totam commodi itaque quae eum labore inventore nostrum, minus error deserunt odit ex repellat consequatur reiciendis corrupti.
              Corrupti reprehenderit minus ipsa in facilis, mollitia ex temporibus cupiditate doloremque, officia rem animi nobis asperiores earum adipisci? Omnis aspernatur iusto quaerat tenetur itaque quo iste nihil, error nesciunt, facere natus minima ab perferendis quis,
              reiciendis dolor repellendus sit commodi nulla. Impedit nihil commodi praesentium corporis accusantium autem mollitia velit dicta eligendi porro. Iusto praesentium sit atque repudiandae quos qui repellat eos nobis reiciendis omnis quisquam, aspernatur deleniti, odio
              blanditiis repellendus eveniet id laborum aperiam maxime velit a voluptatem dolore esse! Autem corporis deleniti eius. Illum, itaque veniam provident voluptatibus voluptatem aperiam, ipsum minus earum, nesciunt rem suscipit. Ipsam illum perspiciatis dolorem, a dicta
              sit suscipit iste accusantium reiciendis veniam voluptatem placeat nesciunt molestiae, velit nemo, unde necessitatibus dolor. Sed voluptate repellendus repudiandae dolore odio? Commodi placeat corporis cumque pariatur hic assumenda veritatis, quidem provident alias
              nam. Ad cupiditate vitae assumenda ipsa temporibus suscipit libero adipisci commodi, tempora itaque? Vel voluptate sint nemo. Vel deleniti voluptatum delectus aperiam numquam quibusdam iure nobis repudiandae, expedita ratione quaerat facere reprehenderit eaque quae
              aspernatur animi obcaecati sunt. Adipisci, molestias veritatis assumenda quisquam, quas, praesentium doloremque blanditiis odio repellendus minima impedit modi temporibus eveniet perspiciatis laboriosam dolore quam quae odit nam enim sint. Accusamus neque fugit earum
              nemo beatae est et iusto eos, necessitatibus dignissimos! Nihil aperiam numquam inventore neque voluptatem ad deserunt rem exercitationem iste sit ullam nisi repellat quaerat in consectetur corporis doloribus, asperiores modi. Veniam, blanditiis cupiditate tempora
              unde perferendis officiis laudantium reiciendis, suscipit quis cumque ipsa, magnam nobis harum alias consectetur reprehenderit error eius ullam provident quod minus! Ipsam porro repellendus blanditiis qui earum adipisci. Esse totam pariatur ab amet quaerat, sit
              perspiciatis itaque asperiores enim laborum, non temporibus iste ipsum expedita, consequuntur id nam dolores maxime corrupti ex vitae quis eius sint. Ipsum blanditiis culpa illo debitis harum et fugiat velit beatae. Molestiae assumenda incidunt, perferendis ex dolorem
              perspiciatis nihil, similique mollitia alias eos ratione veniam. Totam officiis harum at architecto, nesciunt nobis perferendis excepturi nihil nam labore, officia, expedita consequuntur laborum neque aspernatur tempora aliquid? Accusantium quaerat suscipit laborum
              delectus hic nisi repellendus alias fugit dolore incidunt maiores ullam id aut esse, ipsum quidem nobis molestias totam? Facilis hic at dolorum, tempora ut reiciendis exercitationem iure nobis magnam non natus expedita quo, voluptatem eum. Facere, necessitatibus
              debitis. Quod, minus reprehenderit quibusdam quaerat provident odit asperiores ducimus optio eius dolores veniam explicabo impedit corporis sit quo enim aut eaque, dignissimos qui. Quae facere tenetur sed, distinctio officiis exercitationem assumenda eveniet vitae
              natus suscipit repellendus quibusdam corporis eos, dolorem voluptatem nulla facilis eaque voluptatibus. Iusto doloribus beatae qui earum cum tempora illo similique quaerat provident totam asperiores quisquam modi sint culpa vero praesentium est dolorem dolore
              assumenda neque atque, possimus vitae amet. Voluptatibus fugit nulla nobis suscipit omnis non expedita explicabo corporis sapiente natus?
            </p>
          </div>
          <div class="flex gap-4 px-6 py-6 lg:gap-6 lg:px-8 lg:py-8">
            <button class="btn-primary">Subscribe</button>
            <button class="btn-primary-outlined" @click="closeModal">Cancel</button>
          </div>
        </div>
      </div>
    </div>
  </template>
</div>