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

Kit Digital de la Universidad San Sebastián

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

  <section>
    <!-- align left (default) modals -->
    <dialog class="uss-modal" data-uss-modal-id="modal-0" aria-labelledby="#modal-title">
      <div class="uss-modal__body">
        <div class="uss-modal__icon uss-modal__icon--sm uss-modal__icon--info">
          <i class="uss-icon ri-information-line"></i>
        </div>

        <div class="w-100 uss-modal__body-content">
          <h4 id="modal-title">Consectetur adipiscing #1</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" data-uss-modal-id="modal-1">
      <div class="uss-modal__body">
        <div class="uss-modal__icon uss-modal__icon--sm uss-modal__icon--warning">
          <i class="uss-icon ri-alert-line"></i>
        </div>

        <div class="w-100 uss-modal__body-content">
          <h4>Consectetur adipiscing #2</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" data-uss-modal-id="modal-2">
      <div class="uss-modal__body">
        <div class="uss-modal__icon uss-modal__icon--sm uss-modal__icon--error">
          <i class="uss-icon ri-information-line"></i>
        </div>

        <div class="w-100 uss-modal__body-content">
          <h4>Consectetur adipiscing #3</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" data-uss-modal-id="modal-3">
      <div class="uss-modal__body">
        <div class="uss-modal__icon uss-modal__icon--sm uss-modal__icon--success">
          <i class="uss-icon ri-information-line"></i>
        </div>

        <div class="w-100 uss-modal__body-content">
          <h4>Consectetur adipiscing #4</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>