kessi-cpa Library logo (4.0 KB)

How to Make A Custom Dialog Box or Modal Window

Concept

Dialog boxes or modal windows are one the best ways for interacting with users, get their input, or simply confirm something; however, unlike desktop applications, web applications do not have dialog boxes, so if we want to use one, we have to create it ourselves.

In this tutorial, we will create a custom dialog box to ask the user to provide us with their name and favorite color.

Example

What is your name and favorite color?

DIALOG BOX TITLE

Please enter your name and select your favorite color:
SUBMIT
CANCEL

How To

1. Add HTML

<div style="padding: 10px;">
  <p>
    What is your name and favorite color?
  </p>
  <button id="btnRun" class="gBtn" onclick="show_dialog(); return false;">
    CLICK HERE TO DISPLAY THE DIALOG BOX AND ANSWER
  </button>
  <div id="dialogbox" class="dlg">
    <table class="dlgTable">
      <tr>
        <td>
          <div class="dlgcontent">
            <div class="dlgheader">
              <table class="dlgTable">
                <tr>
                  <td class="bodyTD">
                    <p>DIALOG BOX TITLE</p>
                  </td>
                  <td style="width: 40px;">
                    <input type="button" class="dlgbtnX" value="×" onclick="hide_dialog()"/>
                  </td>
                </tr>
              </table>
            </div>
            <div class="dlgbody">
              <table class="dlgTable">
                <tr>
                  <td class="bodyTD" style="text-align: left;">
                    Please enter your name and select your favorite color:
                  </td>
                </tr>
                <tr>
                  <td class="bodyTD">
                    <input type="text" id="txtName" class="txt" placeholder="Your Name"/>
                  </td>
                </tr>
                <tr>
                  <td class="bodyTD">
                    <select id="sltColor" class="slt">
                      <option value="">Select your favorite color</option>
                      <option value="Black">Black</option>
                      <option value="Red">Red</option>
                      <option value="Green">Green</option>
                      <option value="White">White</option>
                      <option value="Other">Other</option>
                    </select>
                  </td>
                </tr>
              </table>
            </div>
            <div class="dlgfooter">
              <table class="dlgTable">
                <tr>
                  <td class="bodyTD">
                    <div class="bBtn" onclick="Submit_Form()">SUBMIT</div>
                  </td>
                  <td class="bodyTD">
                    <div class="bBtn" onclick="hide_dialog()">CANCEL</div>
                  </td>
                </tr>
              </table>
            </div>
          </div>
        </td>
      </tr>
    </table>
  </div>
</div>

2. Add CSS

body
{
    background-color: #fff;
    font-family: Segoe UI,'Helvetica Neue';
    font-size: 18px;
}

*
{
    box-sizing: border-box;
}

.gBtn
{
    display: inline-block;
    text-align: center;
    border: none;
    background-color: #008000;
    background-image: -webkit-linear-gradient(top,#00cc00,#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;
    width: 460px;
    padding: 15px 0;
}

.gBtn:hover
{
    background-color: #00b300;
    background-image: -webkit-linear-gradient(top,#00ff00,#00b300);
    color: #eee;
}

.bBtn
{
    display: inline-block;
    text-align: center;
    border: 2px solid #1a8cff;
    background-color: #3399ff;
    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;
    width: 140px;
    padding: 6px 0;
}

.bBtn:hover
{
    border: 2px solid #66b3ff;
    background-color: #80bfff;
    color: #eee;
}

.txt,
.slt
{
    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;
    max-width: 100%;
}

.txt:focus,
.slt:focus
{
    border-color: #11bbc1;
}

.dlg
{
    display: none;
    height: 100%;
    width: 100%;
    z-index: 2000;
    position: fixed;
    top: 0;
    right: 0;
    background-color: transparent;
    overflow-y: hidden;
    transition: 0.3s;
}

.dlgcontent
{
    margin: 0 auto 0 auto;
    padding: 0px;
    width: 100%;
    max-width: 500px;
    height: auto;
    color: #666;
    background-color: #f9f9f9;
    box-shadow: 0 4px 20px 0 rgba(0,0,0,0.2),0 6px 15px 0 rgba(0,0,0,0.18),0 4px 15px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.18);
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 18px;
}

.dlgheader
{
    width: 100%;
    height: 80px;
    margin-bottom: 3px;
    background-color: #3399ff;
    color: #e1e1e1;
    padding: 0 5px;
    letter-spacing: 4px;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    font-size: 20px;
}

.dlgbody
{
    padding: 5px 15px;
    height: auto;
}

.dlgfooter
{
    width: 100%;
    height: 80px;
    padding: 2px 16px;
    margin-top: 3px;
    border-top: 1px solid #f2f2f2;
}

.dlgbtnX
{
    display: inline-block;
    float: right;
    text-align: left;
    font-size: 40px;
    color: #e1e1e1;
    border: none;
    background-color: transparent;
    cursor: pointer;
    margin: 0;
    padding: 0;
}

.dlgbtnX:hover,
.dlgbtnX:focus
{
    outline: none;
    color: #fff;
}

.dlgTable
{
    width: 100%;
    height: 100%;
}

.bodyTD
{
    text-align: center;
    vertical-align: middle;
    height: 60px;
}

3. Add JavaScript

<script type="text/javascript">
    function Submit_Form() {
        try {
            var uName = document.getElementById("txtName").value;
            var uColor = "";
            if (uName !== "") {
                var slctItem = document.getElementById("sltColor").options[document.getElementById("sltColor").selectedIndex].value;
                if (slctItem !== "") {
                    uColor = slctItem;
                } else {
                    uColor = "Color not selected";
                }
                hide_dialog();
                window.alert("Your name is : " + uName + "\n" + "\n" + "Your color is : " + uColor);
            }
        }
        catch (err) {
            window.alert(err.message);
        }
    }

    function show_dialog() {
        document.getElementById("dialogbox").style.display = "block";
    }

    function hide_dialog() {
        document.getElementById("txtName").value = "";
        document.getElementById("sltColor").selectedIndex = 0;
        document.getElementById("dialogbox").style.display = "none";
    }
</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.