JavaScript

How to Display a Modal with JavaScript [No Plugins, No jQuery]

 

When implementing a modal window, you can achieve it using only JavaScript and CSS without external libraries like jQuery. A modal window is a popup-like element displayed within the page that covers the entire screen, drawing attention to specific information you want to convey to users effectively.

By avoiding complex movements or animations and focusing on minimal display effects, you can efficiently implement modal functionality using standard CSS and JavaScript features. Lightweight modal displays like this enhance page performance and operate smoothly even in resource-constrained environments such as mobile devices.

This article explains how to create a modal window with step-by-step instructions and concrete code examples. Use this guide to add minimal modal display functionality to your website.

Contents
  1. CSS for Modal Display
  2. HTML for Modal Area and Buttons
  3. JavaScript to Control Modal Display
  4. Demo Page for Modal Display without jQuery
  5. Conclusion

CSS for Modal Display

First, write basic CSS to control the display and hiding of the modal window. The role of CSS is to manage the layout and display state of the modal area, ensuring that it appears in the center of the screen when a user clicks on it.

The following code defines the styles for the modal window’s background and content area.

<style type="text/css">
body{
  font-family:Verdana,"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W6",Osaka,"ＭＳ Ｐゴシック",Arial,sans-serif;
  padding: 0;
  margin: 0;
  overflow-x: hidden;
  line-height: 1.8em;
  text-align: center;
}
h1{
  font-size:16px;
  text-align:center;
  font-weight:normal;
  padding:10px 0;
  position: relative;
}
#modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.6);
}
.content{
  background-color:#ffffff;
  width: 500px;
  margin: 20% auto 0 auto;
  padding: 50px;
  text-align: center;
}
.content p{
  font-size: 20px;
  font-weight: bold;
  padding-bottom: 20px;
}
</style>

Explanation:

  • The #modal selector initializes the modal window with display: none;, hiding it by default.
  • The position: fixed; property ensures that the modal is always displayed in the center of the screen, regardless of window size.
  • The background color is set to a translucent black to emphasize the main content.

HTML for Modal Area and Buttons

Next, define the modal area and the buttons to display and hide it within the HTML. In this example, a “Show Modal” button is set up to display the modal area when clicked.

<h1>Click the "Show Modal" button to display the "Modal Area".</h1>

<div id="modal">
  <div class="content">
      <p>Modal Display Area</p>
      <input type="button" id="close" value="Close">
  </div>
</div>

<input type="button" id="bt" value='Show Modal'>

Explanation:

  • The id="modal" defines the modal display area, where you can place the content to display.
  • Clicking the button with id="bt" displays the modal window.
  • The modal area includes a “Close” button that allows users to close the modal window.

JavaScript to Control Modal Display

Finally, add a script to handle button click events and toggle the modal window’s visibility. Modal control is straightforward: clicking the button changes the modal area’s display property.

<script type="text/javascript">
var bt = document.getElementById('bt');
var modal = document.getElementById('modal');
var close = document.getElementById('close');

bt.addEventListener('click', function() {
  modal.style.display = 'block';
})
close.addEventListener('click', function() {
  modal.style.display = 'none';
})
</script>

Explanation:

  • The document.getElementById('bt') retrieves the “Show Modal” button and sets up a click event. When clicked, the modal is displayed by setting modal.style.display = 'block';.
  • Similarly, the document.getElementById('close') retrieves the “Close” button, and clicking it hides the modal area.

This method avoids reliance on external libraries like jQuery and is ideal for simple modal displays without impacting page performance.

Demo Page for Modal Display without jQuery

Check the demo page below to see the actual behavior:

Demo: Modal Display without jQuery

Conclusion

Modal windows are a powerful way to communicate important information to users. The method introduced here is a lightweight implementation combining simple CSS and JavaScript without relying on external libraries, offering a significant advantage.

Additionally, you can extend styles and features as needed to create more complex modal windows. For example, you can add fade-in/fade-out animations, change the size, or modify the design to suit user needs.

Modal windows have diverse applications, such as form input confirmations, popup advertisements, and operation alerts. Consider incorporating this lightweight modal implementation in your future web development projects.

※ Please use this at your own discretion. Do not reuse the Google Analytics tags within the head tag.

Modal
RELATED POST