How to Use Model Pop Up in MVC

following are the reference file need to add in view.

<script src="~/Scripts/jquery-1.8.2.min.js"></script>

<script src="~/Scripts/jquery-ui-1.8.24.min.js"></script>

<link href="~/Content/themes/base/jquery-ui.css" rel="stylesheet" />

<script src="~/Scripts/Dialogbox.js"></script>

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Here is the code for Dialogbox.js

$(document).ready(function () {

    var url = "";

    $("#dialog-alert").dialog({

        title: 'Alert',

        autoOpen: false,

        resizable: false,

        height: 170,

        width: 350,

        show: { effect: 'drop', direction: "up" },

        modal: true,

        draggable: true,

        open: function (event, ui) {

            $(".ui-dialog-titlebar-close").hide();

        },

        buttons: {

            "OK": function () {

                $(this).dialog("close");

            },

            "Cancel": function () {

                $(this).dialog("close");

            }

        }

    });

    $("#dialog-create").dialog({

        title: 'Create',

        autoOpen: false,

        resizable: false,

        width: 400,

        show: { effect: 'drop', direction: "up" },

        modal: true,

        draggable: true,

        open: function (event, ui) {

            $(".ui-dialog-titlebar-close").hide();

            $(this).load(url);

        }

    });

    $("#dialog-edit").dialog({

        title: 'Modify',

        autoOpen: false,

        resizable: false,

        width: 400,

        show: { effect: 'drop', direction: "up" },

        modal: true,

        draggable: true,

        open: function (event, ui) {

            $(".ui-dialog-titlebar-close").hide();

            $(this).load(url);

        }

    });

    $("#dialog-confirmm").dialog({

        title: 'Confirmation',

        autoOpen: false,

        resizable: false,

        height: 170,

        width: 350,

        show: { effect: 'drop', direction: "up" },

        modal: true,

        draggable: true,

        open: function (event, ui) {

            $(".ui-dialog-titlebar-close").hide();

        },

        buttons: {

            "OK": function () {

                $(this).dialog("close");

                window.location.href = url;

            },

            "Cancel": function () {

                $(this).dialog("close");

            }

        }

    });

    $("#dialog-detail").dialog({

        title: 'View Details',

        autoOpen: false,

        resizable: false,

        width: 400,

        show: { effect: 'drop', direction: "up" },

        modal: true,

        draggable: true,

        open: function (event, ui) {

            $(".ui-dialog-titlebar-close").hide();

            $(this).load(url);

        },

        buttons: {

            "Close": function () {

                $(this).dialog("close");

            }

        }

    });

    $("#lnkCreate").live("click", function (e) {

        //e.preventDefault(); //use this or return false

        url = $(this).attr('href');

        $("#dialog-create").dialog('open');

        return false;

    });

    $(".lnkEdit").live("click", function (e) {

        // e.preventDefault(); use this or return false

        url = $(this).attr('href');

        $(".ui-dialog-title").html("Update");

        $("#dialog-edit").dialog('open');

        return false;

    });

    $(".lnkDelete").live("click", function (e) {

        // e.preventDefault(); use this or return false

        url = $(this).attr('href');

        $("#dialog-confirmm").dialog('open');

        return false;

    });

    $(".lnkDetail").live("click", function (e) {

        // e.preventDefault(); use this or return false

        url = $(this).attr('href');

        $("#dialog-detail").dialog('open');

        return false;

    });

    $("#btncancel").live("click", function (e) {

        $("#dialog-edit").dialog("close");

        return false;

    });

});

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Following code need to add in master page (_Layout)

 <div id="dialog-create" style="display: none">

        </div>

        <div id="dialog-alert" style="display: none">

            <p>

                @TempData["msg"]!

            </p>

        </div>

        <div id="dialog-confirm" style="display: none">

            <p>

                <span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px 0;"></span>

                Are you sure to delete?

            </p>

        </div>

        <div id="dialog-edit" style="display: none">

        </div>

        <div id="dialog-detail" style="display: none">

        </div>

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Call Model popup by click on hyperlink - by using id = 'lnkCreate'

@Html.ActionLink("Add Expence", "AddExpence", null, new { id = "lnkCreate" })