kessi-cpa Library logo (4.0 KB)

How to Create Custom Popup Notifications

Concept

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.

Example

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;">
  <p>
    Leave the textbox empty and click the SUBMIT button. Then click inside the textbox to hide the popup.
  </p>
  <div class="popup">
    <input id="txtName" class="txt" type="text" placeholder="Name" onfocus="hideError()" />
    <br />
    <span id="NameSpan" class="popupSpan">
        <label id="pNameError"></label>
    </span>
  </div>
  <br />
  <br />
  <input type="button" id="btnSubmit" class="gBtn" onclick="Submit_Form()" value="SUBMIT" />
</div>

2. Add CSS

.popup
{
    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;
}

.txt
{
    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;
}

.txt:hover
{
    border-color: #11bbc1;
}

.gBtn
{
    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;
}

.gBtn:hover
{
    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 {
            hideError();
            var uName = document.getElementById("txtName").value;
            if (uName == "") {
                showError("Please enter your name");
            }
        }
        catch (err) {
            window.alert(err.message);
        }
    }

    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";
    }
</script>
js for dialogbox (39 kb)
Author of this article:
Mahmoud Kessi, CPA, CGA
mkessi@kessi-cpa.com
(204) 226-9576

Comments & Questions

Add New Comment or Question




Post

REPLY/COMMENT



Email Link


Link to be shared:

×

Confirmation

Copyright © 2016-2019 KESSITEK.