Member Avatar for priyam1309

I want to create a layer popup, as the one used on this website when you click on Member's login. I require the solution to be in HTML & CSS, JSCRIPT, PHP, etc.
When the page opens, the popup should appear and the background (main webpage) would be blacked / dimmed out.
Thanks in advance. I have not an expert in HTML / CSS and very beginner in PHP, so please help me in simple step by step instructions.

  • 3 Contributors
  • 2 Replies
  • 117 Views
  • 18 Hours Discussion Span
  • Latest Post Latest Post by gunnarflax

Dani AI

Generated

This is a modal (lightbox) overlay — the page is dimmed and a centered box appears. As pointed out, there are ready-made plugins; is also working on a plugin. Below is a small, clear DIY approach you can paste into a page. It shows the popup on load, dims the background, allows closing (click overlay, click Close, or Escape), and includes an optional PHP/ cookie snippet to show it only once.

HTML (place near body):

<div id="overlay" class="overlay"></div>
<div id="modal" class="modal" role="dialog" aria-modal="true" aria-labelledby="modal-title" tabindex="-1">
  <button class="modal-close">Close</button>
  <h2 id="modal-title">Member Login</h2>
  <div class="modal-body">
    <!-- put your login form or content here -->
  </div>
</div>

CSS (simple styles and transitions):

.overlay { position: fixed; top:0; right:0; bottom:0; left:0; background: rgba(0,0,0,0.6); opacity:0; pointer-events:none; transition: opacity .25s ease; z-index:1000; }
.modal { position: fixed; top:50%; left:50%; transform: translate(-50%,-50%) scale(.95); background:#fff; max-width:420px; width:90%; padding:16px; box-shadow:0 10px 30px rgba(0,0,0,.3); opacity:0; pointer-events:none; transition: opacity .25s ease, transform .25s ease; z-index:1001; }
.overlay.visible, .modal.visible { opacity:1; pointer-events:auto; }
.modal.visible { transform: translate(-50%,-50%) scale(1); }
body.modal-open { overflow: hidden; }

JavaScript (show on load, close handlers, Escape key, focus restore):

document.addEventListener('DOMContentLoaded', function () {
  var overlay = document.getElementById('overlay');
  var modal = document.getElementById('modal');
  var closeBtn = modal.querySelector('.modal-close');
  var prevFocus;

  function openModal() {
    prevFocus = document.activeElement;
    overlay.classList.add('visible');
    modal.classList.add('visible');
    document.body.classList.add('modal-open');
    modal.focus();
    document.addEventListener('keydown', onKey);
  }

  function closeModal() {
    overlay.classList.remove('visible');
    modal.classList.remove('visible');
    document.body.classList.remove('modal-open');
    document.removeEventListener('keydown', onKey);
    if (prevFocus) prevFocus.focus();
  }

  function onKey(e) { if (e.key === 'Escape') closeModal(); }

  overlay.addEventListener('click', closeModal);
  closeBtn.addEventListener('click', closeModal);

  openModal();

  // optional: only once per browser
  // if (!localStorage.getItem('popupShown')) { openModal(); localStorage.setItem('popupShown','1'); }
});

Optional PHP to show once (server side):

<?php
$showPopup = true;
if (isset($_COOKIE['popup_shown'])) { $showPopup = false; }
else { setcookie('popup_shown','1', time()+86400, '/'); }
?>
<script>
if (<?php echo $showPopup ? 'true' : 'false'; ?>) { openModal(); }
</script>

Notes: set role="dialog" and aria-modal="true" for accessibility and add a real focus trap for complex content. If the overlay does not block interaction check z-index and body.modal-open to stop scrolling. Use transform and opacity for smoother animations. This minimal setup is easy to extend or replace with a library if you prefer the plug-and-play route mentioned by .

Recommended Answers

All 2 Replies

Member Avatar for macneato

Hi Priyam,

What you talking about is lightbox. There are TONS of solutions out there (practically outta the box). Umh. Off the top of my head.

Member Avatar for gunnarflax

I'm actually doing my own plugin for this kind of popups, based on user templates, if you want to you could be my beta tester :)

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.