Dialogue Boxes In Websites

There are various types of dialog boxes or message boxes that can be used in a website. I will be providing examples of some of the most basic and frequently used ones.

Browsers by default provide two inbuilt JavaScript message boxes, "alert" and "confirm". The major drawback with these is that they cannot be styled with additional HTML controls. Also, each browser renders them differently.

You can use other third party dialog boxes that use JavaScript and CSS to render your dialog.

jQuery Dialog Box

Reference Library from where you can download it  -  http://jquery.com/download

 

Bootstrap Dialog Box

 

Reference Library from where you can download it  -  http://getbootstrap.com/getting-started/#download

 

Bootstrap Alert Box

 

 

Angular JS Dialog Box

 

Reference Library from where you can download it - https://angularjs.org/

 

Kendo UI Dialog Box

 

 

Reference Library from where you can download it - http://www.telerik.com/kendo-ui

 

There are various other available dialog boxes that can be used. Some are standalone and some come packaged along with a framework.

Example of using the above dialog boxes

<h3>Different kinds of dialog boxes:</h3>
<br />
<ol>
    <li>
        <input type="button" value="Alert Box" onclick="alert('Hello');" />
        <i>Each browser renders this differently and you cannot style it</i>
        <br />
    </li>
    <li>
        <input type="button" value="Confirm" onclick="confirm('Are you sure?');" />
        <i>Provides ok and cancel buttons and return true or false. Each browser renders this differently and you cannot style it</i>
        <br />
    </li>
</ol>
<b>The below dialog boxes require third party javascript/css libraries. I will be covering the most popular ones.</b>
<ol>
    <li value="3">
        <script src="~/js/jquery-ui.min.js"></script>
        <link href="~/css/jquery-ui.min.css" rel="stylesheet" />
        <link href="~/css/jquery-ui.structure.min.css" rel="stylesheet" />
        <link href="~/css/jquery-ui.theme.min.css" rel="stylesheet" />
        <script type="text/javascript">
            $(document).ready(function () {
                $("#dialog").dialog({
                    autoOpen: false
                });

                $("#jqDialog").on("click", function () {
                    $("#dialog").dialog("open");
                });
            });
        </script>
        <div id="dialog" title="Jquery dialog">
            <p>This is a Jquery UI dialog Box. You can customize it by adding themes.</p>
        </div>
        <input id="jqDialog" type="button" value="Jquery Dialog Box" />
        <i>Requires Jquery and Jquery UI libraries</i>
        <br />
    </li>
    <li>
        <input id="bootDialog" type="button" value="Bootstrap Dialog Box" data-toggle="modal" data-target="#myModal" />
        <i>Requires Jquery and bootstrap libraries</i>
        <!-- Modal -->
        <div class="modal fade" id="myModal" role="dialog">
            <div class="modal-dialog">
                <!-- Modal content-->
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">×</button>
                        <h4 class="modal-title">Boostap Dialog </h4>
                    </div>
                    <div class="modal-body">
                        <p>This is a Boostrap dialog Box.</p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>
        <br />
    </li>
    <li>
        <script type="text/javascript">
            $(document).ready(function () {
                $("#bootAlert").on("click", function () {
                    $("#bootAlertDiv").show();
                });
            });
        </script>
        <input id="bootAlert" type="button" value="Bootstrap Alert" />
        <div id="bootAlertDiv" class="alert alert-success alert-dismissable fade in" style="display:none;">
            <a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
            <strong>Success!</strong> Show message to user!! Can be customized with success,info,warning and danger.
        </div>
       <i>Requires Jquery and bootstrap libraries</i>
    </li>
    <li>
        <a href="https://material.angularjs.org/latest/demo/dialog" target="_blank" class="btn-default">Angular JS Dialog</a>
        <i>Requires Angular library</i>
    </li>
    <li>
       <a href="https://demos.telerik.com/kendo-ui/dialog/index" target="_blank" class="btn-default">Kendo-ui Dialog</a>
        <i> You need to purchase license to use this library</i>
    </li>
</ol>

Note - These examples only show how to use the dialog boxes and do not show how they should be structured.

 

I’ve also attached this example with the article so you can download it for later reference.