Monday, June 25, 2012

Asp.net jQuery UI confirm dialog


The jQuery UI Dialog Widget is a simple widget used to display information, it is similar to a message box, but we can customize the Dialog as required, we can add our own custom buttons to the Dialog. Here we shall see on how to create a Confirmation dialog.


To know more about the basics of jQuery UI Dialog refer to the post Asp.Net jQuery UI Dialog Widget.

<script type="text/javascript" src="JavaScript/jquery-1.7.2.js"></script>
<script type="text/javascript" src="JavaScript/jquery-ui-1.8.21.custom.min.js"></script>
<link type="text/css" href="css/smoothness/jquery-ui-1.8.21.custom.css" rel="Stylesheet" />

<style type="text/css">
    .ui-dialog .ui-dialog-buttonpane
    {
        text-align: left;
    }
    .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset
    {
        float: none;
    }
</style>

<script type="text/javascript">
    $(document).ready(function() {
        var confirm = function() { alert('Yes Button Clicked'); }
        var cancel = function() { alert('No Button Clicked'); }
        $('#cmdShowDialog').click(function() {
            $('#myDialog').dialog
                (
                    {
                        buttons:
                        [
                            {
                                text: "Yes",
                                click: confirm
                            },
                            {
                                text: "No",
                                click: cancel
                            }
                        ]
                    }
                );
        });
        $('#cmdHideDialog').click(function() {
            $('#myDialog').dialog('close');
        });
    });
</script>

<body>
    <div id="myDialog" style="display:none;" title="Hello Dialog">
        Are you sure, you want to Save <br /><br />
    </div>
    <form id="frmDialog" runat="server">       
        <div>
            <input type="button"
                id="cmdShowDialog"                
                value="Show Dialog" />
           <input type="button"
                id="cmdHideDialog"                
                value="Hide Dialog" />
        </div>
    </form>
</body>

Run the application, click on the Show Dialog button, the Dialog will get displayed as follows.


Search Flipkart Products:
Flipkart.com

No comments: