@ussebastian/kitdigital/docs/components/alerts/modal-centered.html

Kit Digital de la Universidad San Sebastián

<section class="w-100 my-128 flex justify-content-center align-items-center">
  <section>
    <h4>Centered Modals opened by buttons</h4>
    <div class="flex gap-12">
      <button class="uss-btn uss-btn--secondary" data-uss-modal-target="modal-4">Modal info</button>
      <button class="uss-btn uss-btn--secondary" data-uss-modal-target="modal-5">
        Modal warning
      </button>
      <button class="uss-btn uss-btn--secondary" data-uss-modal-target="modal-6">
        Modal error
      </button>
      <button class="uss-btn uss-btn--secondary" data-uss-modal-target="modal-7">
        Modal success
      </button>
    </div>
    <h4 class="mt-32">Centered Modals opened by window.componentModalInstances</h4>
    <div class="flex gap-24">
      <button
        class="uss-btn uss-btn--tertiary"
        onclick="window.componentModalInstances['modal-4'].openModal()"
      >
        Modal info
      </button>
      <button
        class="uss-btn uss-btn--tertiary"
        onclick="window.componentModalInstances['modal-5'].openModal()"
      >
        Modal warning
      </button>
      <button
        class="uss-btn uss-btn--tertiary"
        onclick="window.componentModalInstances['modal-6'].openModal()"
      >
        Modal error
      </button>
      <button
        class="uss-btn uss-btn--tertiary"
        onclick="window.componentModalInstances['modal-7'].openModal()"
      >
        Modal success
      </button>
    </div>
  </section>

  <section>
    <!-- centered modals -->
    <dialog class="uss-modal uss-modal--centered" data-uss-modal-id="modal-4">
      <div class="uss-modal__body">
        <div class="uss-modal__icon uss-modal__icon--info">
          <i class="uss-icon ri-information-line"></i>
        </div>

        <div class="w-100 uss-modal__body-content">
          <h4>Consectetur adipiscing #5</h4>
          <p>
            Lectus magna fringilla urna, porttitor rhoncus dolor purus non enim praesent elementum
            facilisis leo, vel fringilla est ullamcorper eget nulla facilisi etiam dignissim diam
            quis
          </p>
        </div>
      </div>
      <div class="uss-modal__footer">
        <a
          href="#"
          class="uss-btn uss-btn--secondary col-3 justify-content-center"
          data-uss-modal-close-on-click
        >
          Volver
        </a>
        <a
          href="#"
          class="uss-btn uss-btn--primary col-3 justify-content-center"
          data-uss-modal-close-on-click
          onclick="alert('Acción de prueba')"
        >
          Acción
        </a>
      </div>
    </dialog>
    <dialog class="uss-modal uss-modal--centered" data-uss-modal-id="modal-5">
      <div class="uss-modal__body">
        <div class="uss-modal__icon uss-modal__icon--warning">
          <i class="uss-icon ri-alert-line"></i>
        </div>

        <div class="w-100 uss-modal__body-content">
          <h4>Consectetur adipiscing #6</h4>
          <p>
            Lectus magna fringilla urna, porttitor rhoncus dolor purus non enim praesent elementum
            facilisis leo, vel fringilla est ullamcorper eget nulla facilisi etiam dignissim diam
            quis
          </p>
        </div>
      </div>
      <div class="uss-modal__footer">
        <a
          href="#"
          class="uss-btn uss-btn--secondary col-3 justify-content-center"
          data-uss-modal-close-on-click
        >
          Volver
        </a>
        <a
          href="#"
          class="uss-btn uss-btn--primary col-3 justify-content-center"
          data-uss-modal-close-on-click
          onclick="alert('Acción de prueba')"
        >
          Acción
        </a>
      </div>
    </dialog>
    <dialog class="uss-modal uss-modal--centered" data-uss-modal-id="modal-6">
      <div class="uss-modal__body">
        <div class="uss-modal__icon uss-modal__icon--error">
          <i class="uss-icon ri-information-line"></i>
        </div>

        <div class="w-100 uss-modal__body-content">
          <h4>Consectetur adipiscing #7</h4>
          <p>
            Lectus magna fringilla urna, porttitor rhoncus dolor purus non enim praesent elementum
            facilisis leo, vel fringilla est ullamcorper eget nulla facilisi etiam dignissim diam
            quis
          </p>
        </div>
      </div>
      <div class="uss-modal__footer">
        <a
          href="#"
          class="uss-btn uss-btn--secondary col-3 justify-content-center"
          data-uss-modal-close-on-click
        >
          Volver
        </a>
        <a
          href="#"
          class="uss-btn uss-btn--primary col-3 justify-content-center"
          data-uss-modal-close-on-click
          onclick="alert('Acción de prueba')"
        >
          Acción
        </a>
      </div>
    </dialog>
    <dialog class="uss-modal uss-modal--centered" data-uss-modal-id="modal-7">
      <div class="uss-modal__body">
        <div class="uss-modal__icon uss-modal__icon--success">
          <i class="uss-icon ri-information-line"></i>
        </div>

        <div class="w-100 uss-modal__body-content">
          <h4>Consectetur adipiscing #8</h4>
          <p>
            Lectus magna fringilla urna, porttitor rhoncus dolor purus non enim praesent elementum
            facilisis leo, vel fringilla est ullamcorper eget nulla facilisi etiam dignissim diam
            quis
          </p>
        </div>
      </div>
      <div class="uss-modal__footer">
        <a
          href="#"
          class="uss-btn uss-btn--secondary col-3 justify-content-center"
          data-uss-modal-close-on-click
        >
          Volver
        </a>
        <a
          href="#"
          class="uss-btn uss-btn--primary col-3 justify-content-center"
          data-uss-modal-close-on-click
          onclick="alert('Acción de prueba')"
        >
          Acción
        </a>
      </div>
    </dialog>
  </section>
</section>