Pure Javascript Modals with Header and Footer without any Library

| Page Views: 54

How to Create Modals using Pure Javascript without any Library

There is no need to include third party libraries sometimes for something as creatable as a modal. In this tutorial we explore how to create great looking professional modals using only a few lines of Javascript,HTML and CSS.

The modals will have both header,footer and content section.

Let's go.

Video Tutorial

You can view the video tutorial below:

(a). style.css
/* Let's start by defining general properties of our body */
body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 17px;
  line-height: 1.6;
}
/* Let's define properties of our button */
.button {
  background: #009968;
  /* let's set the thickness of padding area */
  padding: 1em 2em;
  color: #fff;
  border: 0;
}
/* Let' set a different bg color when user hovers over our button */
.button:hover {
  background: #333;
}
/* Let's define properties of our modal/dialog */
.modal {
  display: none;
  position: fixed;
  /* let's specify the stack level of our modalin the current context */
  z-index: 1;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  /* Overflow in both x and y axis */
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.5);
}
/* Let's define properties of our modal content */
.modal-content {
  background-color: #f4f4f4;
  margin: 20% auto;
  width: 70%;
  box-shadow: 0 5px 8px 0px rgba(0, 0, 0, 0.2), 0 7px 20px 0px rgba(0, 0, 0, 0.17);
  animation-name: modalopen;
  animation-duration: 1s;
}

.modal-header h2, .modal-footer h3 {
  margin: 0;
}

.modal-header {
  background: #009968;
  padding: 15px;
  color: #fff;
}

.modal-body {
  padding: 10px 20px;
}

.modal-footer {
  background: #009968;
  padding: 10px;
  color: #fff;
  text-align: center;
}

.closeBtn {
  color: #fff;
  float: right;
  font-size: 30px;
}

.closeBtn:hover, .closeBtn:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

@keyframes modalopen {
  from {opacity: 0}
  to {opacity: 1}
}
(b). main.js
//  Let's Get modal element
var modal = document.getElementById('modalID');

//  Let's Get open modal button
var modalBtn = document.getElementById('modalBtn');

//  Let's  Get close button
var closeBtn = document.getElementsByClassName('closeBtn')[0];

// Let's Listen for open click
modalBtn.addEventListener('click', openModal);

//  Let's Listen for close click
closeBtn.addEventListener('click', closeModal);

//  Let's Listen for outside click, or window click
window.addEventListener('click', clickOutside)

//  Let's create a Function to open modal
function openModal() {
  modal.style.display = 'block';
}

//  Let's create a Function to close modal
function closeModal() {
  modal.style.display = 'none';
}

//  Let's create a Function to close modal on outside click
function clickOutside(e) {
  if (e.target == modal) {
    modal.style.display = 'none';
  }
}
(c)index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Modal Tutorial</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <button id="modalBtn" class="button">Open Modal</button>

  <div id="modalID" class="modal">

    <div class="modal-content">
      <div class="modal-header">
        <span class="closeBtn">&times;</span>
        <h2>Aldebaran</h2>
      </div>

      <div class="modal-body">
        <p>A Red Supergiant</p>
        <p>Aldebaran, also designated α Tauri, is a red giant star located about
           65 light-years from the Sun in the zodiac constellation Taurus. It is
            the brightest star in Taurus and generally the fourteenth-brightest
            star in the night sky, though it varies slowly in brightness between
             magnitude 0.75 and 0.95.</p>
      </div>

      <div class="modal-footer">
        <h3>People also search for </h3><a hre="">Betelgeuse</a>
      </div>

    </div>
  </div>

  <script src="main.js"></script>
</body>
</html>
Download

You can download the full source code below or watch the video from the link provided.

No. Location Link
1. Github Direct Download
2. YouTube Video Tutorial
3. YouTube ProgrammingWizards TV Channel

How do You Feel after reading this?

According to scientists, we humans have 8 primary innate emotions: joy, acceptance, fear, surprise, sadness, disgust, anger, and anticipation. Feel free to tell us how you feel about this article using these emotes or via the comment section.

About Me.

After completing his Software Engineering bachelors program, Oclemy(Clement Ochieng) these days is a man of two lives. At day he works for a startup in Nairobi, Kenya. At night he works tirelessly on building ProgrammingWizards TV, a tv channel for student coders and this website to help share the source code. In between he practices Meditation and Self actualization to help him keep balance. He also likes going for long solo walks to connect more with nature.




Recommendations


What do You Think


Previous Post Next Post