How to create an Analog Clock using HTML5 CSS3 and JavaScriptHTML5 | How to create Guess the next number GameHTML5 | How to create a simple Clock using JavaScriptCreate custom Navigation Bar using HTML5 and CSS3HTML5 | Create custom dialog box like facebookNavigation Tab using HTML5 and CSS3 - No JavaScriptDesign a simple calendar for your blog and website using HTML5 CSS3 and JavaScriptDesign a Calendar for your Blog and Website using HTML5 CSS3 and JavaScriptHow to create a Pie chart using ChartJSHTML5 | How to draw a Doughnut chart using ChartJS

HTML5 | Create custom dialog box like facebook

Web Project

← PrevNext →

In this project we will create a dialog box like facebook using HTML5 CSS3 and JavaScript.

Requirement

For this project we can use any text editor like Notepad++, SublimeText, gEdit, TextMate, Coda, Brackets etc.

In the above video Brackets has been used which is an open source software and can be downloaded from their website brackets.io

Files

In this project we will write the html css and javascript code in the index.html page. You can separate the code into three different files if you want.


<!DOCTYPE html>
<html>
    <head>
        <title>Dialog Box</title>
        <style>
            #white-background{
                display: none;
                width: 100%;
                height: 100%;
                position: fixed;
                top: 0px;
                left: 0px;
                background-color: #fefefe;
                opacity: 0.7;
                z-index: 9999;
            }
            
            #dlgbox{
                /*initially dialog box is hidden*/
                display: none;
                position: fixed;
                width: 480px;
                z-index: 9999;
                border-radius: 10px;
                background-color: #7c7d7e;
            }
            
            #dlg-header{
                background-color: #6d84b4;
                color: white;
                font-size: 20px;
                padding: 10px;
                margin: 10px 10px 0px 10px;
            }
            
            #dlg-body{
                background-color: white;
                color: black;
                font-size: 14px;
                padding: 10px;
                margin: 0px 10px 0px 10px;
            }
            
            #dlg-footer{
                background-color: #f2f2f2;
                text-align: right;
                padding: 10px;
                margin: 0px 10px 10px 10px;
            }
            
            #dlg-footer button{
                background-color: #6d84b4;
                color: white;
                padding: 5px;
                border: 0px;
            }
        </style>
    </head>
    <body>
        <!-- dialog box -->
        <div id="white-background">
        </div>
        <div id="dlgbox">
            <div id="dlg-header">You are logged out.</div>
            <div id="dlg-body">Kindly log in to continue.</div>
            <div id="dlg-footer">
                <button onclick="dlgLogin()">Log in</button>
            </div>
        </div>
        
        <!-- rest of the page -->
        <h1>Dialog Box Demo</h1>
        <p>This is a dialog box example.</p>
        <p>Feel free to experiment with the code.</p>
        <p>Click the button below to see the dialog box.</p>
        <button onclick="showDialog()">Click Me!</button>
        
        <!-- script of dialog -->
        <script>
            function dlgLogin(){
                var whitebg = document.getElementById("white-background");
                var dlg = document.getElementById("dlgbox");
                whitebg.style.display = "none";
                dlg.style.display = "none";
            }
            
            function showDialog(){
                var whitebg = document.getElementById("white-background");
                var dlg = document.getElementById("dlgbox");
                whitebg.style.display = "block";
                dlg.style.display = "block";
                
                var winWidth = window.innerWidth;
                var winHeight = window.innerHeight;
                
                dlg.style.left = (winWidth/2) - 480/2 + "px";
                dlg.style.top = "150px";
            }
        </script>
    </body>
</html>
← PrevNext →