Jquery Messagebox MVC3 when I click on a link

Question

I have this in my view

<tr>
                            <td>@Model.EnrolledPolicies[i].InsuredName</td>
                            <td>@Model.EnrolledPolicies[i].ProductType</td>
                            <td>@Model.EnrolledPolicies[i].PolicyNumber</td>
                            <td>@Model.EnrolledPolicies[i].IssueDate</td>
                            <td>@Model.EnrolledPolicies[i].Status</td>
                            <td>
                                @if (Model.EnrolledPolicies[i].CanViewContractDetails)
                                {
                                    @Html.ActionLink("View Details", "ViewContractDetails", new { @Contract=Model.EnrolledPolicies[i].PolicyNumber });
                                }
                                else
                                {
                                    <a href="#">View Details</a>
                                }

                            </td>
                        </tr>

In the above else statement I would like to write some code for a Jquery message box. When I click on "View Details" from the else statement, a message box should be appearing saying Access is restricted. Can someone help me on this?

Answer 1

Using jQuery UI plugin:

<a href="#" class="notAllowed">View Details</a>
<div id="dialog">Access Denied</div>

$(function() {
    $('a.notAllowed').click(
        $( "#dialog:ui-dialog" ).dialog( "destroy" );

        $( "#dialog-message" ).dialog({
            modal: true,
            buttons: {
                Ok: function() {
                    $( this ).dialog( "close" );
                }
            }
        });
    );
});

Note: Style the dialog div by applying a class so that its hidden by default.