kessi-cpa Library logo (4.0 KB)

How to Create Custom Popup Notifications


In some cases, you would want to communicate important information to your website visitors but do not wish to show the information on the page. You want to draw the visitor’s attention toward something in your website. Notifications are particularly important when you need to inform your visitors about an error or omission when submitting a form.

In this tutorial, we will create a custom popup notification that will warn the user when information in a field is required.


Leave the textbox empty and click the SUBMIT button. Then click inside textbox to hide the popup.

How To

1. Add HTML

<div style="padding: 20px;">
    Leave the textbox empty and click the SUBMIT button. Then click inside the textbox to hide the popup.
  <div class="popup">
    <input id="txtName" class="txt" type="text" placeholder="Name" onfocus="hideError()" />
    <br />
    <span id="NameSpan" class="popupSpan">
        <label id="pNameError"></label>
  <br />
  <br />
  <input type="button" id="btnSubmit" class="gBtn" onclick="Submit_Form()" value="SUBMIT" />

2. Add CSS

    position: relative;
    display: inline-block;
    box-sizing: border-box;
    width: 100%;
    top: 0px;
    left: 0px;

.popup .popupSpan
    visibility: hidden;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    width: 200px;
    height: auto;
    background-color: #f2700c;
    background-image: webkit-linear-gradient(top,#f79b55,#f2700c);
    color: #fff;
    border-radius: 5px;
    padding: 10px 0;
    position: absolute;
    z-index: 99;
    top: 55px;
    left: 20px;
    opacity: 0;
    transition: opacity 1s;
    font-size: 16px;

.popup .popupSpan:after
    content: "";
    position: absolute;
    top: -15px;
    left: 20px;
    margin-left: -4px;
    border-width: 8px;
    border-style: solid;
    border-color: transparent transparent #f79b55 transparent;

    width: 100%;
    max-width: 400px;
    padding: 12px 10px;
    font-size: 16px;
    font-weight: 200;
    margin: 5px 0;
    border: 1px solid #ccc;
    border-radius: 3px;
    color: #0c4d6f;
    background-color: #fff;
    transition: 0.3s;

    border-color: #11bbc1;

    width: 140px;
    height: 36px;
    border: 2px solid #006600;
    background-color: #008000;
    border-radius: 2px;
    cursor: pointer;
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14);
    transition: 0.4s;

    box-shadow: 0 4px 4px 0 rgba(0,0,0,0.25);
    background-color: #00cc00;
    color: #eee;

3. Add JavaScript

<script type="text/javascript">
    function Submit_Form() {
        try {
            var uName = document.getElementById("txtName").value;
            if (uName == "") {
                showError("Please enter your name");
        catch (err) {

    function showError(ErrorMessage) {
        if (document.getElementById("NameSpan") !== null) {
            document.getElementById("pNameError").innerText = ErrorMessage;
            document.getElementById("NameSpan").style.visibility = "visible";
            document.getElementById("NameSpan").style.opacity = "1";

    function hideError() {
        document.getElementById("NameSpan").style.visibility = "hidden";
        document.getElementById("NameSpan").style.opacity = "0";
js for dialogbox (39 kb)
Author of this article:
Mahmoud Kessi, CPA, CGA
(204) 226-9576

Comments & Questions

Add New Comment or Question



Email Link

Link to be shared:



Copyright © 2016-2019 KESSITEK.