Member Avatar for keval_hack

Hi,

I am php programmer but i don't have site designing knowledge can any one help me how to create login dialog box same as Daniweb.com site login dialog.

Thanks in advance.

  • 2 Contributors
  • 3 Replies
  • 86 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by Member #334542

Dani AI

Generated

A concise path for a Daniweb-style login: treat it as a modal overlay (centered form, dimmed backdrop, clear close control) that submits to the PHP backend by AJAX or a normal POST fallback. As hinted, an overlay is the right pattern; the practical options are (a) the native HTML5 <dialog> element, (b) a framework modal (Bootstrap, jQuery UI), or (c) a small custom CSS/JS overlay if a framework is not desired.

Example (minimal, progressive-enhancement approach):

<button id="openLogin">Log in</button>

<dialog id="loginDialog" aria-labelledby="loginTitle">
  <form id="loginForm" method="post" action="/login">
    <h2 id="loginTitle">Log in</h2>
    <label>Username<input name="username" required></label>
    <label>Password<input name="password" type="password" required></label>
    <input type="hidden" name="csrf_token" value="...">
    <div>
      <button type="submit">Sign in</button>
      <button type="button" id="cancel">Cancel</button>
    </div>
  </form>
</dialog>

<script>
const dlg = document.getElementById('loginDialog');
document.getElementById('openLogin').addEventListener('click', ()=> dlg.showModal());
document.getElementById('cancel').addEventListener('click', ()=> dlg.close());

document.getElementById('loginForm').addEventListener('submit', e=>{
  e.preventDefault();
  fetch('/login', { method:'POST', body:new FormData(e.target), credentials:'same-origin' })
    .then(r=>r.json()).then(j=> j.success ? location.reload() : /* show inline errors */ null);
});
</script>

Notes and cautions: include a server-generated CSRF token in the form, use HTTPS and HttpOnly/secure session cookies, and return JSON for AJAX success/error handling. Add an explicit accessible focus trap if not using a native dialog or an ARIA pattern. For accessibility guidance see the WAI-ARIA dialog example and the HTML <dialog> reference on MDN (WAI-ARIA example, MDN dialog element).

Common problems: z-index/backdrop layering, keyboard handling (Escape to close, Enter to submit), focus lost to page behind, missing CSRF or CORS issues with AJAX, and older browsers that need a dialog polyfill or a framework fallback.

Recommended Answers

All 3 Replies

Member Avatar for keval_hack

But this light box is about Displaying image but i Want to display form element.how can this possible .pls provide code if any one have

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.