HTMLify

<!-- Trigger button -->
<button onclick="openloginAlertModal()">Open Login Alert</button>

<!-- Login Alert Modal -->
<div id="loginAlertModal" class="modal" role="dialog" aria-modal="true">
  <div class="panel">
    <h3>Login Alert</h3>
    <div>
      <h4>You can't Click.<br>Login First!!</h4>
    </div>
    <div style="display:flex;gap:8px;justify-content:flex-end;margin-top:8px">
      <button type="button" id="closeloginAlertModal" class="btn ghost">Close</button>
    </div>
  </div>
</div>

<style>
  .modal { display: none; position: fixed; top:0; left:0; width:100%; height:100%; background: rgba(0,0,0,0.5); }
  .modal.show { display: flex; align-items: center; justify-content: center; }
  .panel { background:#fff; padding:20px; border-radius:8px; }
</style>

<script>
  const loginAlertModal = document.getElementById('loginAlertModal');

  function openloginAlertModal() {
    if (loginAlertModal) loginAlertModal.classList.add('show');
  }

  if (document.getElementById('closeloginAlertModal')) {
    document.getElementById('closeloginAlertModal').addEventListener('click', () =>
      loginAlertModal.classList.remove('show')
    );
  }
</script>