Friday, 6 December 2013

Open Dialogbox in jQuery UI MVC

Hello Friends,
Open a Dialogbox is required so manytimes in our porject. so use the following code for this.

<link href="~/Content/themes/base/jquery.ui.dialog.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.7.1.js"></script>
<script src="~/Scripts/jquery-ui-1.8.20.min.js"></script>

<button id="show-dialog" tabindex="3">Click Open Dialogbox</button>          
<div id="dialog" title="Dialogbox Title" >
   <p>This is a simple Dialogbox body</p>
</div>  

@section scripts {
    <script type="text/javascript">
        $('#dialog').dialog({
            autoOpen: false,
            width: 600,
            buttons: {
                "Ok": function () { $(this).dialog("close"); },
                "Cancel": function () { $(this).dialog("close"); }
            }
        });
        $("#show-dialog").button().click(function () {
            $('#dialog').dialog('open');
            $('#dialog').attr('tabIndex', -1).css('outline', 0).focus().keydown(function (ev)
            {
                if (ev.keyCode && ev.keyCode === jQuery.ui.keyCode.ENTER)
                {
                    $('#dialog').dialog('close');
                }
            });
            return false;
        });
     
    </script>
}

No comments:

Post a Comment