Custom alert dialog

      No comments   
The alert dialog is something every JavaScript developer uses frequently. Since they are provided by the browser, their UI/look vary between browsers. Here we will be building a custom alert dialog which looks and feels the same across all browsers. You can view the demo here.

The basic knowledge of html, Css and JavaScript is required. We will be using jquery for DOM manipulation so little knowledge of jquery is also expected.

This is the file structure.
  • index.html
  • script.js
  • jquery-min.js
  • style.css 
The html file contains mainly three things : the alert dialog, a button to show it and a background div which covers the whole page so that user can focus on the alert dialog. Copy and paste it in index.html file.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<html>

<head>
    <title> Custom alert dialog </title>
    <link rel="stylesheet" href="style.css" />
</head>

<body>

    <!--Div to show output color-->
    <div id="alertDialog">
        <p class="heading">Hurray</p>
        <div class="content">I have made my first custom alert dialog in javascript</div>

        <br>
        <br>
        <button id="btnHideDialog">Cancel</button>
    </div>
    <div id="background"></div>

    <button id="btnShowDialog">Click me to view your alert dialog</button>

    <!--JavaScript files-->
    <script type="text/javascript" src="jquery-min.js"></script>
    <script type="text/javascript" src="script.js"></script>
</body>

</html>

If viewed on browser you will see nothing than a button. So let’s give some style to the ugly html.


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
#alertDialog {
    position: absolute;
    top: 0;
    left: 0;
    height: 200px;
    width: 400px;
    border-radius: 5px;
    background-color: white;
    border-style: solid;
    border-width: 1px;
    z-index: 2;
    visibility: hidden;
    padding: 10px;
    text-align: center;
}

#alertDialog p.heading {
    font-size: 40px;
    font-weight: bolder;
}

#background {
    position: absolute;
    top: 0;
    left: 0;
    background-color: gray;
    opacity: 0.3;
    width: 100%;
    height: 100%;
    z-index: 1;
    visibility: hidden;
}

As you can see both alertDialog and background are given absolute position and higher z-index value because we need to show the alertdialog always at the center of page even the window is scrolled. The height, width, color etc. can be customized as per the preference. Another important property is ‘visibillity’. Initially it’s not shown to the user so it’s set to ‘hidden’.

Now let’s move to the actual job. We show the dialog box when something happens like : when a user clicks the button to subscribe to your blog, you show the subscribe form in a dialog box. Here we will also display it on button click.

So let’s define our showDialog() and hideDialog() function first.


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
//function to show alertDialog
function showDialog() {
    //apply css to both alertDialog and background
    $("#alertDialog,#background").css('visibility', 'visible');
}

//function to hide alertDialog
function hideDialog() {
    //apply css to both alertDialog and background
    $("#alertDialog,#background").css('visibility', 'hidden');
}

In showDialog() function we changed the visibility of alertDialog and background to visible inside the css() function of jquery. Similarly, visibility is set to hidden in hideDialog() function.

Now let’s attach it to click event so we can view it in action. 


1
2
3
4
5
6
7
$('#btnShowDialog').click(function () {
    showDialog();
});

$('#btnHideDialog,#background').click(function () {
    hideDialog();
});

The alertDialog is shown when clicked on btnShowDialog and its hidden when clicked on btnHideDialog or on background. Save all the javascript in script.js file and open it in browser. When you click on the button, the alertDialog is shown.



It appears at the upperleft corner. Let’s fix that. Make a new function setPosition() and  set the dialog box to central position. The logic is : “half of the window size subtracted by half of the dialogbox size gives central position”. Call the setPosition() function after its declaration.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
// function to center dialog box
function setPosition() {

    // .css() function gives a string, so we parse it as integer
    //half of the window size subtarcted by half of the dialogbox size gives central position
    var xPosition = window.innerWidth / 2 - parseInt($("#alertDialog").css('width')) / 2;
    var yPosition = window.innerHeight / 2 - parseInt($("#alertDialog").css('height')) / 2;

    $("#alertDialog").css('left', xPosition);
    $("#alertDialog").css('top', yPosition);
}


Also the dialog needs to be centered when users resize the browser, so invoke the setPosition() function on onresize event. Save and run it. You will get something like this. 



That’s it. The custom alert dialog box is ready. It can be made more dynamic by passing the heading and content of the dialog box to showDialog(heading,content) function. Also custom styles and JQuery animations can be added to make it more realistic. 

If you have any queries please do ask in the comments.

Happy Coding (^_^)

0 comments:

Post a Comment