How-To: Tutorial Javascript (JS): Creating a Modal (1 Viewer)

Deathsidious

Vetted Officer
May 5, 2018
19
New York, USA
Clan Rank
Vetted Member
Vetted Member
Ever wondered how the popup window is created when you click on a login button on a web page? This post will give you a quick tutorial.

Bonus: Use CSS to give your login box more definition.

I recommend separating your CSS/HTML/PHP/Javascript into separate files. It will make them more manageable. Create the following files for this tutorial in its own folder:
  1. index.html
  2. style.css
  3. main.js

index.html:
Code:
<HTML>
 <HEAD>
  <TITLE>Test Modal</TITLE>
  <!-- Reference your stylesheet here-->
 </HEAD>
 <BODY>
  <!-- Create the button that triggers the modal -->
  <button id="modalBtn">Login</button>

  <!-- Create the Modal Container. Give your container an id by using the id tag. You also need to assign a class to your container
to set your properties from your CSS file.-->
  <div id="loginModal" class="modal">

   <!-- This will hold your Modal Content. You will also want to assign a class to your content  container for additional properties that will be applied to this container ONLY.-->
   <div class="modal-content">
    <span class="close">&times;</span>
    <form action="">
     Username:<input type="text"><br>
     Password:<input type="password"><br>
     <input type="submit" value="submit">
    </form>
   </div>
  </div>
 </BODY>
 <!-- Reference your Javascript file here -->
</HTML>
style.css:
Code:
/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content/Box */
.modal-content {
    background-color: #fefefe;
    margin: 15% auto; /* 15% from the top and centered */
    padding: 20px;
    border: 1px solid #888;
    width: 80%; /* Could be more or less, depending on screen size */
}

/* The Close Button */
.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}
main.js:
Code:
// Get the modal
var modal = document.getElementById('loginModal');

// Get the button that opens the modal
var btn = document.getElementById("modalBtn");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks on the button, open the modal 
btn.onclick = function() {
    modal.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
    modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}
 

Users Who Are Viewing This Thread (Users: 0, Guests: 1)

Similar threads