Member Avatar for heshanm

Hi guys,

I have a problem. When i want to logged out from the system or close an account etc i want to display this message. " Are you sure you want to logged or something like" and "Yes and " No" buttons are there.

How this can be achieved??

Thanks,

  • 2 Contributors
  • 2 Replies
  • 273 Views
  • 3 Weeks Discussion Span
  • Latest Post Latest Post by heshanm

Dani AI

Generated

Quick answer for : use a tiny custom modal for a proper Yes/No UI (so you control labels and styling) instead of trying to style the browser’s built-in dialogs. was right to point out the native dialogs are limited; they’re fine for quick checks but not for custom buttons or styling. (developer.mozilla.org)

A simple, modern approach is the HTML <dialog> element plus a small script that intercepts the logout action and shows the dialog. Example (HTML + JS):

<button class="logout">Logout</button>

<dialog id="confirmLogout" aria-labelledby="dlgTitle" aria-describedby="dlgDesc">
  <h2 id="dlgTitle">Confirm logout</h2>
  <p id="dlgDesc">Are you sure you want to log out?</p>

  <form id="logoutForm" method="post" action="/logout">
    <!-- server should emit a CSRF token into this form -->
    <menu>
      <button id="noBtn" type="button" autofocus>No</button>
      <button id="yesBtn" type="submit">Yes</button>
    </menu>
  </form>
</dialog>

<script>
const logoutBtn = document.querySelector('.logout');
const dialog = document.getElementById('confirmLogout');
let lastTrigger = null;

logoutBtn.addEventListener('click', e => {
  e.preventDefault();
  lastTrigger = e.currentTarget;
  if (typeof dialog.showModal === 'function') {
    dialog.showModal();
  } else {
    // very old browsers: fallback to a simple confirm()
    if (confirm('Are you sure you want to log out?')) document.getElementById('logoutForm').submit();
  }
});

document.getElementById('noBtn').addEventListener('click', () => {
  dialog.close();
  if (lastTrigger) lastTrigger.focus();
});
</script>

The native <dialog> gives built-in modal semantics and focus behavior; use it where supported and polyfill or fallback otherwise. For keyboard and screen-reader friendliness follow the ARIA dialog guidance (trap focus, return focus to the opener, provide clear labeling). If you want a warning on tab/window close, note that modern browsers only show a generic built-in message for beforeunload and you can’t customize that text. (developer.mozilla.org)

Security note: make logout a server-side POST (not an unprotected GET link) and include/validate a CSRF token so an attacker can’t force logouts or other state changes. (docs.devnet-academy.com)

Troubleshooting tips: test keyboard flow (Tab/Shift+Tab, Esc), ensure the dialog gets and returns focus, and add a tiny fallback for old browsers.

Recommended Answers

All 2 Replies

Member Avatar for hielo

In javascript you cannot customize the buttons.
alert() displays: OK
confirm() and prompt() displays: OK , Cancel

Your option would be to use a javascript plugin:

Member Avatar for heshanm

Thanks a lot..

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.