To achieve a basic pop-up effect, you need to follow the following steps: 1. Structure: Use HTML to create trigger buttons, mask layer and pop-up content area; 2. Style: Set the default hidden, centered layout, mask background and close button styles through CSS; 3. Interaction: Use JavaScript to bind click events to control pop-up display and hide, and can expand the ESC key closing function; 4. Optimization: Add CSS animation to improve user experience. The entire process does not require a third-party library, which is suitable for quickly realizing basic pop-up functions.

Popups or modal boxes are very common in web pages, such as login boxes, prompt information, etc. It is actually not difficult to implement a basic pop-up window. It only requires HTML, CSS and a little JavaScript.

Next, I will talk about how to make a simple pop-up effect step by step.

1. Structure: Use HTML to build a basic framework

Write the structural part first, HTML mainly includes trigger buttons, mask layer and pop-up content area.

 <!-- Trigger button-->
<button id="openModal">Open pop-up window</button>

<!-- Pop-up window structure->
<div class="modal" id="modal">
  <div class="modal-overlay" id="modalOverlay"></div>
  <div class="modal-content">
    <span class="close-btn" id="closeBtn">&times;</span>
    <p>This is a simple pop-up content</p>
  </div>
</div>

Here are a few key elements:

• button is a button used to trigger pop-up display;
• .modal is the entire pop-up container;
• .modal-overlay is the background mask layer;
• .modal-content is the specific content of the pop-up window;
• .close-btn is the close button, using the × symbol.

2. Style: Use CSS to control the appearance and animation of pop-up windows

This part mainly controls the style when pop-up windows are hidden by default, and the mask layer effect.

 .modal {
  display: none; /* hide by default*/
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 999;
}

.modal-overlay {
  background-color: rgba(0, 0, 0, 0.5);
  width: 100%;
  height: 100%;
}

.modal-content {
  background-color: #fff;
  margin: 15% auto;
  padding: 20px;
  border-radius: 5px;
  width: 300px;
  position: relative;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.close-btn {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 24px;
  cursor: pointer;
}

Pay attention to a few points:

• The pop-up window is hidden by default (display: none), and will be displayed using JS later;
• The masking layer was made of a translucent black background;
• The content of the pop-up window is centered on margin and fixed width;
• The close button is absolutely positioned and placed in the upper right corner.

3. Interaction: Use JS to control display and hide

This part is the most important thing, it is responsible for binding click events and switching pop-up window status.

 const modal = document.getElementById("modal");
const openBtn = document.getElementById("openModal");
const closeBtn = document.getElementById("closeBtn");
const overlay = document.getElementById("modalOverlay");

// Click the button to openBtn.addEventListener("click", () => {
  modal.style.display = "block";
});

// Click the close button or mask layer to close the pop-up window closeBtn.addEventListener("click", () => {
  modal.style.display = "none";
});

overlay.addEventListener("click", () => {
  modal.style.display = "none";
});

You can expand more functions as needed, such as pressing the ESC key to close the pop-up window:

 document.addEventListener("keydown", (e) => {
  if (e.key === "Escape" && modal.style.display === "block") {
    modal.style.display = "none";
  }
});

4. Optional optimization: add a little animation to make the experience smoother

Although the pop-up window can be used now, it is a bit stiff to directly display/hide. You can use CSS animation to make it more natural:

 .modal-content {
  animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

In this way, every time the pop-up window appears, it will have a fading effect and the user experience will be better.

Basically that's it. You can just put these three pieces of code into HTML, CSS, and JS files respectively, and you will see a basic pop-up window that is available. No additional libraries are required, suitable for fast implementation of needs.

The above is the detailed content of How to create a simple popup or modal with HTML, CSS, and JS?. For more information, please follow other related articles on the PHP Chinese website!