How to show view as a dialog box / modal popup using jquery in mvc3 razor

Let’s take an example where we want to show one view as popup on click of action link present in another view.
Let’s create two views
1. Index.cshtml (This is the view where action link is present)
2. Popup.cshtml (this view has to be shown on click of actionlink)

Popup.cshtml

@{
    ViewBag.Title = "Pup Up";
    Layout = null;
}

<br />
<h2>PopUp</h2>
<p>

<p>
Hello, this is a modal jquery popup !
</p>
<p>

<p><a href="javascript:void(0);" class="close">Hola, Now close it</a></p>
<p>

Index.cshtml

@{
    ViewBag.Title = "Home Page";
}

<br />
<h2>@ViewBag.Message</h2>
<p>

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

This action link calls Popup Actionresult of HomeController, which returns Popup.cshtml.
We are using three properties of action link
class – indicates that on click of this link, execute the jquery written bellow
data_dialog_id
data_dialog_title – Used to display the title of the jquery modal popup

In HomeController just create one Actionresult which will return Popup.cshtml

public ActionResult Popup()
        {
            return View();
        }


Now Just copy the bellow script in _Layout.cshtml

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

    <script type="text/javascript">

        $.ajaxSetup({ cache: false });

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

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

                    })
                    .load(this.href);
            });

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

Hope it helps.

admin

  • Sudheer

    Above code shows duplicate popups (2 popups). To overcome this issue remove the
    tag from the script that is pasted in _Layout.cshtml file as shown

    …..$(”
    “)
    .addClass(“dialog”) ……

    • Sudheer

      Remove “” from the below code

      ” $(”

      “)
      .addClass(“dialog”) “

      • Morne Wheller

        I`m having the behaviour of duplicate popups but cant clearly see what needs to be changed.

  • Mrityunjaya

    Thanks for useful post.
    We just need to remove tag from

    $(“”)

    in Script of _Layout.cshtml file and it will work.

  • Mrityunjaya

    *paragraph Tag ”

  • pnvtm

    Thanks!!!

    i just replaced $(“”) by $(“”)

    • pnvtm

      replaced tags “div /div p” by “p /p”

  • Puremic

    This is perfect!!! Thanks

  • Pawan Raut

    Thanks….
    Just remove tag..
    replace $(”

    “)

    with
    $(“”)

  • Morne Wheller

    I`m having the behaviour of duplicate popups but cant clearly see what needs to be changed.