Jitesh Byahut 2/25/2014 3325

How To Use Dialog In Jquery

Here we are creating a dialog box and open that dialog on button click using Jquery

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title>Jquery-dialog</title>

    <script src="../../Scripts/Jquery-ui/js/jquery-1.9.1.js" type="text/javascript"></script>

    <script src="../../Scripts/Jquery-ui/js/jquery-ui-1.10.3.custom.js" type="text/javascript"></script>

    <link href="../../Scripts/Jquery-ui/css/ui-lightness/jquery-ui-1.10.3.custom.css" rel="stylesheet" />

    <script type="text/javascript">

        $(document).ready(function () {

            $(function () {

                $("#dialog").dialog({

                    autoOpen: false,

                    modal: true,

                    width: 300,

                    height:200,

                    buttons: {

                        "Close": function () { $(this).dialog("close"); },

                        "Cancel": function () { $(this).dialog("close"); }

                    }           

                });

            });

 

            $("#btnopen").click(function () {

                $("#dialog").dialog("open");

            });

        });

    </script>

</head>

<body>

    <form id="form1" runat="server">

    <div id="dialog" title="Dialog">

        <table width="250px">

            <tr>

                <td>Name  :</td>

                <td align="center"><asp:TextBox ID="txtName" runat="server"></asp:TextBox></td>

            </tr>

            <tr>

                <td>Email :</td>

                <td align="center"><asp:TextBox ID="txtEmail" runat="server"></asp:TextBox></td>

            </tr>

        </table>

    </div>

    <input type="button" id="btnopen" value="Click For Open Dialog" />

    </form>

</body>

</html>

View output :

demo

If you want to open dialog box on page load then use following codes : -

$(function () {

                $("#dialog").dialog({

                    autoOpen: true,

                    modal: true,

                    width: 300,

                    height:200,

                    buttons: {

                        "Close": function () { $(this).dialog("close"); },

                        "Cancel": function () { $(this).dialog("close"); }

                    }           

                });

            });

View output :



Please give your feedback for improving this page