Your browser either has JavaScript disabled or it is malfunctioning.

Use this table of contents to navigate this site.

AN ALTERNATIVE TO THE
JS ALERT METHOD

Background

The JavaScript window alert() method hasn't gotten much love since it was first introduced in the 1990s. While it's intentions were good, it became a bit of a danger thanks to some nefarious folks on the the internet who would use it to exploit vulnerabilities in browsers and their JavaScript engines. This is one reason why, as the JS developers continued to refine and add to JS, the alert() method (and it's brothers like the confirm() method) didn't see many changes. In fact, basically nothing has changed with these methods. With them, you get a box that pops up with minimal customization capabilities and that has nothing resembling the look and feel of your web site.

The work around for this is to create a replacement modal popup using the latest features of HTML, CSS and JS. This type of popup is more customizable and can be crafted to fit into a site's aesthetic. You have probably seen one of these before. For instance, you click on a button on a site, the web page turns gray and a box appears centered on the screen asking you to input information, agree to terms of service, etc. That's an exanple of what is detailed here.

The apporach discussed here will create an HTML overlay that appears and disappears based on a trigger. This overlay is modal in that the user must interact with it to get it to disappear once it is shown. This modal popup is created and executed using basic HTML, CSS and JavaScript. The code is resusable so you can create multiple modal popups for a page that use a single JavaScript function to show and hide them.

For a demostration of what this does, give it a try ---> .

The HTML

The HTML is pretty simple.

<DIV ID="modal1" CLASS="modal" onclick='clickOut("modal1");'>
      <DIV CLASS="modal-content">
           <DIV CLASS="modal-body">
                This is the modal "window" that we can show and hide.
                <P>
                Since it's just HTML, we can put whatever we want here.
               <P>
               The Cancel button hides this again. Clicking in the gray area around it also hides it.
               <P>
               <BUTTON CLASS="close" onclick="doModal('modal1','close');">Cancel</BUTTON>
           </DIV>
      </DIV>
</DIV>

The above creates three DIVs, modal1, modal-content and modal-body.

modal1 is the container DIV for the modal popup we are going to show/hide. Each DIV used as a modal popup must have a unique ID. For example, to have a second modal popup, we would call it modal2.

modal-content is the full modal popup area we are going to show/hide; the gray area and the area containing the text and button.

modal-body is the area containing just the text and button.

The containiner DIV modal1 will be hidden initially as seen in the CSS below. We will need to create an action to show it. For example, a button that is clicked.

<BUTTON onclick="doModal('modal1','open');"> Show the Modal </BUTTON>

This button executes the JavaScript function called doModal (see below) and passes two values to it. modal1 is the the name of the DIV that is our target and open is the action we want to take on the target.

Likewise, the Cancel button in the modal popup calls doModal, passes the DIV name (modal1) and the action (close). When clicked, the DIV modal1 will be hidden again.

The CSS

The CSS is a bit more complex because it has to do a lot of work to make sure we get the desired visual effect.

This CSS control the display of the DIVs defined in the HTML above.

/* The modal container DIV */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
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 */
}

/* The modal popup */
.modal-content {
position: relative;
background-color: #FFFFFF;
margin: auto;
padding: 5px;
border: 3px solid #062F4F;
width: 25%;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.4s;
animation-name: animatetop;
animation-duration: 0.4s
}

/* Effect when hovering over or tabbing to the Cancel button */
.close:hover, .close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}

/* The DIV containing the text and button */
.modal-body {
padding: 2px 16px;
}

The JavaScript

This is the JavaScript that does the showing and hiding of the DIV. When called

function doModal(div,act) {
     // Get the modal container DIV
     var modal = document.getElementById(div);

     // Show or hide it based on value of act
     if (act == "open") {
           modal.style.display = "block";
     } else if (act == "close") {
           modal.style.display = "none";
     } else {
           alert("Huh?");
     }
}

// When the user clicks anywhere outside of the modal, close it
function clickOut(div) {
      var modal = document.getElementById(div);

      window.onclick = function(event) {
           if (event.target == modal) {
                modal.style.display = "none";
           }
      }
}

Removing the calls to the function clickOut(div) from the container DIVs will force closure (hiding) to only occur through the mechanism you set in the actual displayed content. For example, without onclick='clickOut("modal1");' defined for the modal1 DIV seen above, the only way to close (hide) it would be via the Cancel button.