Member Avatar for tech_man_12

Hi,
I'm a newbie in php and web development, and I'm just able to develop basic applications using php and html.
For an application I'm developing, I designed a landing page, and people told me it looks so 90s design, and you need to improve UI and give a more modern look. Right now, I want to know how to design modern looking dialog that can be used to build forms (I intend to use that for registration, login, and for forms that can be of varying length from 2-3 to 8-12 rows of fields) -just to give you an idea what i'm looking for- http://www.gliffy.com/#

Now, I'm doing using php that creates forms in the page, but I feel a dialog would be better,
do I need to go for things like jquery? Please guide me as where to get started. If you have any piece of code skeleton, that can help me get started, I'll be more than grateful.

Thank you.

  • 2 Contributors
  • 1 Reply
  • 644 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by shahbaz13

Dani AI

Generated

— nice question. Modal dialogs are a great way to keep users on the page while showing short forms. You do not have to pull in jQuery just for a dialog; a few lines of vanilla JavaScript + CSS give a lightweight, accessible result. 's suggestion to use a small jQuery modal plugin is fine if you already use jQuery, but below is a modern, simple approach you can adapt while keeping your PHP form-generation and server-side validation.

Key things to get right:

  • Keep the form markup in the DOM (hidden) so it still works without JavaScript (progressive enhancement).
  • Make the modal keyboard-accessible: set role="dialog", aria-modal="true", focus the first input, trap focus while open, and restore focus to the opener when closed.
  • For variable-length forms (2–12 rows) set the panel to max-height: 80vh and overflow: auto so long forms scroll without overflowing the viewport; on small screens switch to a full-screen panel.
  • Always validate on the server (PHP), include a CSRF token in a hidden field, and use secure storage for passwords (PHP password_hash), HTTPS, and HttpOnly/secure cookies.

A minimal skeleton to get started (HTML + CSS + JS):

<button data-open="login">Login</button>

<div id="modal" class="hidden" role="dialog" aria-modal="true" aria-labelledby="modalTitle">
  <div class="modal-panel" tabindex="-1">
    <h2 id="modalTitle">Login</h2>
    <form id="loginForm" action="/login.php" method="post">
      <input name="email" type="email" placeholder="Email" required>
      <input name="password" type="password" placeholder="Password" required>
      <input type="hidden" name="csrf_token" value="...">
      <button type="submit">Submit</button>
    </form>
    <button data-close>Close</button>
  </div>
</div>

<style>
.hidden { display: none; }
#modal { position: fixed; top:0; left:0; right:0; bottom:0; background: rgba(0,0,0,0.5); display:flex; align-items:center; justify-content:center; }
.modal-panel { background:#fff; padding:1rem; width:90%; max-width:480px; max-height:80vh; overflow:auto; outline:none; }
@media (max-width:480px){ .modal-panel { width:100%; height:100vh; max-height:none; border-radius:0; } }
</style>

<script>
const modal = document.getElementById('modal');
let opener = null;
document.querySelectorAll('[data-open]').forEach(btn=>{
  btn.addEventListener('click', e=>{
    opener = btn;
    modal.classList.remove('hidden');
    modal.querySelector('.modal-panel').focus();
  });
});
modal.querySelectorAll('[data-close]').forEach(btn=>
  btn.addEventListener('click', ()=>{ modal.classList.add('hidden'); opener && opener.focus(); })
);
modal.addEventListener('click', e=>{ if(e.target === modal){ modal.classList.add('hidden'); opener && opener.focus(); }});
document.addEventListener('keydown', e=>{ if(e.key === 'Escape' && !modal.classList.contains('hidden')){ modal.classList.add('hidden'); opener && opener.focus(); }});
</script>

Troubleshooting tips: if inputs lose focus, add a proper focus-trap; if mobile layout feels cramped, present the form full-screen; if the form is submitted via AJAX, return JSON with field-level errors and re-render them inside the modal. Start with the simple skeleton above, then layer ARIA focus-trap and server-side hardening as your next steps.

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.