11

I need to create pop up windows in mvc(not new tab in browser). Does anyone know how to do this?

BenMorel
  • 34,448
  • 50
  • 182
  • 322
Cipiripi
  • 1,123
  • 5
  • 17
  • 33

2 Answers2

39

One possibility is to use jquery ui dialog.

EDIT

The idea would be to have an ajax action that returns a partial view. The result of that action (html) is placed inside the container of the popup and on the success handler of the ajax call you open the popup. Here is some sample code:

@Ajax.ActionLink("Open popup", "SomeAction", new AjaxOptions { HttpMethod = "GET", UpdateTargetId = "result", InsertionMode = InsertionMode.Replace, OnSuccess="openPopup" })<br />

<div id="result" style="display:none;"></div>

<script type="text/javascript">
$(document).ready(function() {
    $("#result").dialog({
        autoOpen: false,
        title: 'Title',
        width: 500,
        height: 'auto',
        modal: true
    });
});
function openPopup() {
    $("#result").dialog("open");
}
</script>

Then you have to add the action in the controller that returns the partial view

 [HttpGet]
 public PartialViewResult SomeAction()
 {
      return PartialView();
 }

Place whatever you need in the partial view, you may also include parameters in the action, etc.

Good luck!

uvita
  • 4,124
  • 1
  • 27
  • 23
  • I need to pass url address that will be opened in the modal pop up, and I'm not sure how to do that with jquery..Any idea? – Cipiripi Jan 26 '11 at 12:18
  • It opens just some div as a dialog content doesn't it? But how to open some other page in dialog? – Igor V Savchenko Jan 26 '11 at 13:14
  • That code worked for me (using asp.net mvc 3 rtm). You can specify what you want to show in the popup by specifying the name of the action and the controller in the AjaxActionLink parameters. The framework creates the url for you according to your routing configuration. – uvita Jan 26 '11 at 13:24
  • It works for me, too. I just had to delete style="display:none;, because pop up was invisible – Cipiripi Jan 26 '11 at 14:04
  • 7
    Didn't work for me to begin with until I added `jquery.unobtrusive-ajax.js` (maybe others knew that, but I, being a newbie in that regard, didn't...). – Gorgsenegger Apr 04 '13 at 13:09
  • @Gorgsenegger Please send the link to download `jquery.unobtrusive-ajax.js`. It's not working for me :( Does it work in MVC 2.0? – TechDo May 23 '13 at 09:52
  • @techdo: You can find it via Google or download the `.nupkg` file form here https://www.nuget.org/api/v2/package/jQuery.Ajax.Unobtrusive (change the file's extension to .zip and open it to extract the script file). I don't know about MVC 2, I used it in MVC 3. – Gorgsenegger May 23 '13 at 12:13
  • I'm trying this approach but it stills open a new tab. Do I have to do something else? – Nick L Scott May 23 '14 at 21:31
  • same here opening in new tab. Anything else need to add? – Dnyati Jan 07 '20 at 06:07
3

Most obvious way is using one of js frameworks. Personally I prefere jQuery UI dialog control.
Please check http://jqueryui.com/demos/dialog/ for detailed information about it.
Also you may check ASP.NET MVC modal dialog/popup best practice (it's question similar to yours)

Of course if you need some simple popup you always may use alert('Im popup');

Update according your latest request
To open some url in new window you may use next javascript:

function OpenDialog() {
window.open("some url", "DialogName", "height=200,width=200,modal=yes,alwaysRaised=yes");
}

But result really depends on browser. Most of them open this modal window not in new tab but in new browser instance.
This topic might help you aswell:
JavaScript open in a new window, not tab

Community
  • 1
  • 1
Igor V Savchenko
  • 1,076
  • 1
  • 17
  • 32