Ngorei NexaUI

<button class="nx-btn-primary" onclick="nxModal('basicModal')">
  Buka Modal Dasar
</button>

<div id="basicModal" class="nx-modal" role="dialog" aria-labelledby="basicModal-title">
  <div class="nx-modal-content">
    <div class="nx-modal-header">
      <h5 id="basicModal-title">Modal Dasar</h5>
      <button class="nx-close" onclick="nxMdClose('basicModal')" aria-label="Tutup modal">
        <span>×</span>
      </button>
    </div>
    <div class="nx-modal-body">
      <h3>Ngorei NexaUI</h3>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique illo dolorem deserunt praesentium quidem porro repudiandae ea dignissimos ipsa iste nisi incidunt veritatis doloremque, obcaecati repellat nihil blanditiis, architecto sapiente!</p>
    </div>
  </div>
</div>

<div id="formModal" class="nx-modal" role="dialog" aria-labelledby="formModal-title">
  <form class="nx-modal-content" id="modalForm">
    <div class="nx-modal-header">
      <h5 id="formModal-title">Form dalam Modal</h5>
      <button class="nx-close" onclick="nxMdClose('formModal')" aria-label="Tutup modal">
        <span>&times;</span>
      </button>
    </div>
    <div class="nx-modal-body">
        <div class="form-nexa">
            <label for="input_username">Username</label>
            <div class="form-nexa-icon">
                <i class="fas fa-user"></i>
                <input type="text" class="form-nexa-control" id="input_username" placeholder="Masukkan username">
            </div>
        </div>
    </div>
    <div class="nx-modal-footer">
      <button type="button" class="nx-btn-secondary" onclick="nxMdClose('formModal')">Batalkan</button>
      <button type="button" class="nx-btn-primary" id="send" >Simpan</button>
    </div>
  </form>
</div>

<button class="nx-btn-primary" onclick="nxModal('smallModal')">
  Modal
</button>

<div id="smallModal" class="nx-modal nx-modal-sm" role="dialog" aria-labelledby="smallModal-title">
  <div class="nx-modal-content">
    <div class="nx-modal-header">
      <h5 id="smallModal-title">Modal resizable</h5>
      <button class="nx-close" onclick="nxMdClose('smallModal')" aria-label="Tutup modal">
        <span>×</span>
      </button>
    </div>
    <div class="nx-modal-body">
      <h3>Ngorei NexaUI</h3>
      <p>Ini adalah contoh modal dengan ukuran resizable.</p>
    </div>
  </div>
</div>

<button class="nx-btn-primary" onclick="nxModal('variasiModal')">
  Modal
</button>

<div id="variasiModal" class="nx-modal nx-modal-centered" role="dialog" aria-labelledby="variasiModal-title">
  <div class="nx-modal-content">
    <div class="nx-modal-header">
      <h5 id="variasiModal-title">Modal Centered</h5>
      <button class="nx-close" onclick="nxMdClose('variasiModal')" aria-label="Tutup modal">
        <span>×</span>
      </button>
    </div>
    <div class="nx-modal-body">
      <h3>Ngorei NexaUI</h3>
      <p>Ini adalah contoh modal dengan ukuran variasi.</p>
    </div>
  </div>
</div>

<button class="nx-btn-primary" onclick="nxModal('controlsModal')">
  Modal Controls
</button>

<div id="controlsModal" class="nx-modal nx-modal-draggable" role="dialog" aria-labelledby="controlsModal-title">
<div class="nx-modal-content">
  <div class="nx-modal-header">
    <h5 id="controlsModal-title">Modal Window Controls</h5>
    <button class="nx-close" onclick="nxMdClose('controlsModal')" aria-label="Tutup modal">
      <span>&times;</span>
    </button>
  </div>
  <div class="nx-modal-body">
    <p>Modal ini memiliki tombol kontrol seperti jendela desktop:</p>
    <ul>
      <li>Minimize (─) - Mengecilkan modal ke taskbar</li>
      <li>Maximize (□) - Membesarkan modal ke fullscreen</li>
      <li>Restore (❐) - Mengembalikan ke ukuran semula</li>
    </ul>
    <p>Modal ini juga dapat di-drag dari bagian header.</p>
  </div>
  <div class="nx-modal-footer">
    <button class="nx-btn-secondary" onclick="nxMdClose('controlsModal')">Tutup</button>
  </div>
</div>
</div>

<button class="nx-btn-primary" onclick="nxModal('animationsModal')">
  Modal
</button>
<div id="animationsModal" class="nx-modal nx-modal-zoom" role="dialog" aria-labelledby="animationsModal-title">
  <div class="nx-modal-content">
    <div class="nx-modal-header">
      <h5 id="animationsModal-title">Modal Centered</h5>
      <button class="nx-close" onclick="nxMdClose('animationsModal')" aria-label="Tutup modal">
        <span>×</span>
      </button>
    </div>
    <div class="nx-modal-body">
      <h3>Ngorei NexaUI</h3>
      <p>Ini adalah contoh modal dengan ukuran animations.</p>
    </div>
  </div>
</div>

<button class="nx-btn-primary" onclick="nxModal('resizable')">
  Modal resizable
</button>

<div id="resizable" class="nx-modal nx-modal-resizable" role="dialog" aria-labelledby="resizable-title">
<div class="nx-modal-content">
  <div class="nx-modal-header">
    <h5 id="resizable-title">Modal Window resizable</h5>
    <button class="nx-close" onclick="nxMdClose('resizable')" aria-label="Tutup modal">
      <span>&times;</span>
    </button>
  </div>
  <div class="nx-modal-body">
    <p>Modal ini memiliki tombol kontrol seperti jendela desktop:</p>
    <ul>
      <li>Minimize (─) - Mengecilkan modal ke taskbar</li>
      <li>Maximize (□) - Membesarkan modal ke fullscreen</li>
      <li>Restore (❐) - Mengembalikan ke ukuran semula</li>
    </ul>
    <p>Modal ini juga dapat di-drag dari bagian header.</p>
  </div>
  <div class="nx-modal-footer">
    <button class="nx-btn-secondary" onclick="nxMdClose('resizable')">Tutup</button>
  </div>
</div>
</div>

<button class="nx-btn-primary" onclick="nxMdOpen('modal-parent')">
    Buka Modal Utama
</button>

<div id="modal-parent" class="nx-modal" role="dialog">
    <div class="nx-modal-content">
        <div class="nx-modal-header">
            <h5>Modal Utama</h5>
            <button class="nx-close" onclick="nxMdClose('modal-parent')">×</button>
        </div>
        <div class="nx-modal-body">
            <p>Ini adalah modal utama. Anda dapat membuka modal anak dari sini.</p>
            <button class="nx-btn-dark" onclick="nxMdOpen('modal-child')">
                Buka Modal Anak
            </button>
        </div>
    </div>
</div>

<div id="modal-child" class="nx-modal nx-modal-child nx-modal-no-backdrop" 
    data-parent="modal-parent" role="dialog">
    <div class="nx-modal-content">
        <div class="nx-modal-header">
            <h5>Modal Anak</h5>
            <button class="nx-close" onclick="nxMdClose('modal-child', 'modal-parent')">
                ×
            </button>
        </div>
        <div class="nx-modal-body">
            <p>Ini adalah modal anak yang dibuka dari modal utama.</p>
        </div>
    </div>
</div>

<div id="myModal" class="nx-modal" role="dialog">
  <!-- konten modal -->
</div>


<div id="myModal" class="nx-modal nx-modal-no-backdrop" role="dialog">
  <!-- konten modal -->
</div>
</div>

<div id="animat" class="nx-modal" role="dialog">
        <div class="nx-modal-content nx-animated-bounceIn">
          <div class="nx-modal-header">
            <h5>Modal dengan Animasi</h5>
            <button class="nx-close" onclick="nxMdClose('animat')">
              <span>&times;</span>
            </button>
          </div>
          <div class="nx-modal-body">
            <p>Konten modal dengan efek animasi.</p>
          </div>
        </div>
    </div>

<div id="effectsModal" class="nx-modal nx-modal-effects" role="dialog" aria-labelledby="effectsModal-title">
    <div class="nx-modal-content">
        <div class="nx-modal-header">
            <h5 id="effectsModal-title">Glass Backdrop</h5>
            <button class="nx-close" onclick="nxMdClose('effectsModal')" aria-label="Tutup modal">
                <span>×</span>
            </button>
        </div>
        <div class="nx-modal-body">
            <p>Modal dengan efek glass backdrop yang elegan.</p>
        </div>
        <div class="nx-modal-footer">
            <button class="nx-btn-secondary" onclick="nxMdClose('effectsModal')">Tutup</button>
        </div>
    </div>
</div>