How to show popup message like in Stack Overflow

javascript

popup-engineering

javascript-libraries

accessibility

byAnton Shumikhin·Feb 21, 2025

Create a popup using HTML for structure, CSS for styling, and JavaScript for interactivity. The modal consists of a container with a message and a close button. It's initially hidden and made visible when triggered.

HTML:

<div id="popup" class="modal">
  <div class="content">
    <span class="close">&times;</span>
    <p>Message here...</p>
  </div>
</div>

CSS:

.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto; /* Scroll enabled if needed. Is it a popup or a scrollup? */
  background-color: rgba(0,0,0,0.4); /* Semi-transparent for extra mystery */
}

.content {
  background: #fff;
  margin: 15% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}

.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer; /* Click me! */
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

JavaScript:

var modal = document.getElementById('popup'),
    span = document.getElementsByClassName('close')[0];

function showPopup() {
  modal.style.display = 'block';
  setTimeout(function(){ modal.style.display = 'none'; }, 30000); // Now you see me, in 30s you won't
}

span.onclick = function() {
  modal.style.display = 'none';
}

window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = 'none'; // I am gone with the wind
  }
}

Call showPopup() to trigger the popup.

Dial up the user experience

Values of usability and presentation are the backbone of a great popup. Time for a deep dive into tailoring popups that keep users happy.

Crafting eye-candy CSS styles

Aligning a popup's look and feel with SO's popup goes beyond the minimum. Customize the CSS with shadows for depth, rounded corners for smoothness, and absolute positioning for cross-screen consistency. Use a high z-index to keep it aloft all content just like a crowning jewel.

Giving control back to users

A well-set timer gets your popup off-stage without wearing out its welcome. But remember to get your manners right by providing a manual closure too. Just like Stack Overflow, balance the auto and manual dismissals to make it user-friendly.

Making Popups very accessible for all

Ensure your popup has proper focus management, supports keyboard navigation, and is readable by screen readers. Fear not the jargon, it means your popups contain the right ARIA roles to be accessible to a wider audience.

Ensuring Cross-browser compatibility

SO popups are as reliable as a Swiss clock across all browsers and screen sizes. You can achieve that too, just remember to test your popup across different browsers and viewports.

Extended functionality with jQuery

Vanilla JavaScript is great, but let's take a detour to see how jQuery and jQuery UI can make things smoother.

Transitioning smoothly with jQuery

jQuery offers simple methods like fadeIn and fadeOut that manage your popup's curtain call and exit scene seamlessly.

Leveling Up with jQuery UI Dialog

With its advanced features and theming support, creating a SO styled popup is a breeze. You can create draggable, resizable popups that are both modal and also animated.

Keep it light and easy with jqModal

jqModal is a minimalist's dream. This lightweight jQuery plugin simplifies popup creation while offering a broad canvas for customizations.

Power popups using AJAX Control Toolkit

For a more feature-rich popup, let's visit the AJAX Control Toolkit's ModalPopup.

Research and perform

Studying the AJAX toolkit can give you more than out-of-the-box solutions. It could serve as an inspiration to build custom features that make your popups pop!