Other links to work like ASP.NET MVC 4 JQuery Dialogs

Other links to work like ASP.NET MVC 4 JQuery Dialogs , ASP.NET MVC 4 JQuery Dialogs

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css">
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"></script>
  <a href="http://3.bp.blogspot.com/-atcX8smV6wA/T5ULj6LU4fI/AAAAAAAAAFg/oK08hPLOmWI/s1600/between.png"
        class="UIDialogOpen" data-id="bloger">Bloger</a>
    <br />
    <div>
        @Html.ActionLink("ActionLinkName", "MethodeName", "ControllerName", new { Id =2
        }, new { @class = "UIDialogOpen", data_dialog_title = "UI Dialog Message" })
    </div>
    <div>
        @Html.ActionLink("ActionLinkName", "MethodeName", "ControllerName", null, new {
        @class = "UIDialogOpen", data_dialog_title = "UI Dialog MEssage" })
    </div>

JavaScript

$(document).ready(function () {
            var UIDialogId = 0;

            $('.UIDialogOpen').live('click', function (e) {
                e.preventDefault();

                UIDialogId++;

                $('<div/>', {
                    'id': $(this).attr('data-dialog-id') !== undefined ? $(this).attr('data-dialog-id') : 'UIDialog' + UIDialogId,
                    'class': 'UIDialog'
                }).appendTo('body').dialog({
                    title: $(this).attr('data-dialog-title') !== undefined ? $(this).attr('data-dialog-title') : 'Message',
                    position: ['center', 'center'],
                    modal: true, resizable: false, zIndex: 10000, autoOpen: true,
                    minWidth: $(this).attr('data-dialog-minwidth') !== undefined ? $(this).attr('data-dialog-minwidth') : '300px',
                    minHeight: $(this).attr('data-dialog-minheight') !== undefined ? $(this).attr('data-dialog-minheight') : '300px',
                    maxWidth: $(this).attr('data-dialog-maxwidth') !== undefined ? $(this).attr('data-dialog-maxwidth') : '300px',
                    maxHeight: $(this).attr('data-dialog-maxheight') !== undefined ? $(this).attr('data-dialog-maxheight') : '300px',
                    close: function (event, ui) {
                        $(this).remove();
                    }
                })
                //.load(this.href);

                //Or   //Use .load(this.href); and comment or delete below append line.

                .append('<h1>Hi.. This is Testing </h1> <input type="button" class="UIDialogCancel" value="Cancel" /> <input type="button" class="UIDialogClose" value="Close" />');


                $('.UIDialogClose, .UIDialogCancel').live('click', function (e) {
                    var obj = $(this)
                    e.preventDefault();
                    obj.parents('.UIDialog').dialog('close');
                });
            });
        });