MVC3 Razor和Modal弹出窗口

我需要一个Modal弹出窗口，显示一个将数据保存回db的表单。 这样做有很好的例子吗？ Ajax更灵活还是使用jquery对话框？

Answer 1

我已经使用了JQuery UI Dialog插件并使用JQuery通过ajax加载模式对话框，并且对此非常满意。

我不得不破解我的代码给你一些有用的东西，所以对任何语法错误道歉，但我使用这个jquery，

$('#MyAtag').click(function () { // Add a container for the modal dialog, or get the existing one var dialog = ($('#ModalDialog').length > 0) ? $('#ModalDialog') : $('
').appendTo('body'); // load the data via ajax $.get( 'mycontroller/myaction', {}, function (responseText, textStatus, XMLHttpRequest) { dialog.html(responseText); dialog.dialog({ bgiframe: true, modal: true, width: 940, title: 'My Title' }); } ); }); 

它将对ajax’get’的调用绑定到链接的’click’事件。 ajax get请求从我的MVC项目中的相应操作返回一个局部视图，然后显示在modal dialog中。

以下是控制器外观的粗略示例

  public ActionResult MyAction() { // Do Some stuff //... // If the request is an ajax one, return the partial view if (Request.IsAjaxRequest()) return PartialView("PartialViewName"); // Else return the normal view return View(); } 

对话框的视图只是一个普通的局部视图。

我使用以下.css，它“模糊”modal dialog后面的页面

 .ui-widget-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #AAA url(images/ui-bg_flat_0_aaaaaa_40x100.png) 50% 50% repeat-x; opacity: .8; filter: Alpha(Opacity=30); } 

您可能需要使用#ModalDialog的css来使其看起来正确，

Answer 2

这很简单，但这不是插件： http ： //deseloper.org/read/2009/10/jquery-simple-modal-window/

基于Jquery插件的模式： http ： //www.ericmmartin.com/projects/simplemodal/

希望这可以帮助。

Answer 3

你可以使用jquery对话框。 您还可以使用Jquery工具。

http://flowplayer.org/tools/demos/overlay/modal-dialog.html

它的占地面积也非常小。