Tuesday, October 22, 2013

Modal Dialog form view using JQuery ASP.Net MVC



@{
    ViewBag.Title = "Home Page";
}
<style type="text/css">
    .dialog_css
    {
        border: 0px none !important;
        -moz-box-shadow: 1px 2px 4px 2px rgb(136, 136, 136);
        -webkit-box-shadow: 1px 2px 4px 2px rgb(136, 136, 136);
        box-shadow: 3px 6px 8px rgb(136, 136, 136);
    }
</style>

<div>
<a href="#" onclick="ShowPopup();">open</a>

<div id="dialog" style="display: none; width: 600px;">
    Shows the dialog as soon as the dialog() method is called when set to true.
bgiframe      false Creates an
    <br />
    shim to prevent
    <br />
    elements showing through the dialog in IE6 (at present the bgiframe plugin is required). We'll look at this option in more detail shortly. This plugin is due to be retired in version 1.8 of the library and will be replaced by the new stackfix component.<br />
    Supplies an object containing buttons to be used with the dialog. Each property name becomes the text on the
    <br />
    element, and the value of each property is a callback function, which is executed when the button is clicked.
</div>
</div>

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")   

    <link href="@Url.Content("~/Content/themes/base/jquery-ui.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/jquery-1.7.1.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery-ui-1.8.20.min.js")" type="text/javascript"></script>



    <script type="text/javascript">
        function ShowPopup() {
            $(function () {
                //$("#dialog").html('test message');
                $("#dialog").dialog({
                    title: "jQuery Dialog Popup",
                    buttons: {
                        Close: function () {
                            $(this).dialog('close');
                        }
                    },
                    dialogClass: 'dialog_css',
                    width: 500,
                    closeOnEscape: false,
                    draggable: false,
                    resizable: false,
                    modal: true
                });
            });
        };
    </script>
}