I am using Modal Popup in my MVC3 application it works fine but opens twice for a single Click on the link. The Modal pop is triggered from the 'Index' view of my Home Controller. I am calling a view 'PopUp.cshtml' in my modal popup. The related ActionMethod 'PopUp' for the respective view is in my 'Home' controller.

Here is the code,

Jquery code on layout.cshtml page,

<script type="text/javascript">
    $.ajaxSetup({ cache: false });

    $(document).ready(function () {
        $(".openPopup").live("click", function (e) {
            e.preventDefault();

            $("<div></div><p>")
                    .attr("id", $(this).attr("data-dialog-id"))
                    .appendTo("body")
                    .dialog({
                        autoOpen: true,
                        title: $(this).attr("data-dialog-title"),
                        modal: true,
                        height: 250,
                        width: 900,
                        left: 0,
                        buttons: { "Close": function () { $(this).dialog("close"); } }
                    })
                    .load(this.href);
        });

        $(".close").live("click", function (e) {
            e.preventDefault();
            $(this).dialog("close");
        });
    });
    </script>

cshtml code in 'PopUp.cshtml'

@{
    ViewBag.Title = "PopUp";
    Layout = null;
}

<h2>PopUp</h2>

<p>
Hello this is a Modal Pop-Up
</p>

Call modal popup code in Index view of Home Controller,

<p>
   @Html.ActionLink("Click here to open modal popup", "Popup", "Home",null, new { @class = "openPopup", data_dialog_id = "popuplDialog", data_dialog_title = "PopUp" })
</p>

What am I doing wrong that the modal pop up opens twice ?

Thanks in Advance !