Question

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

Answer 1

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

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

$('#MyAtag').click(function () {
    // Add a container for the modal dialog, or get the existing one
    var dialog = ($('#ModalDialog').length > 0) ? $('#ModalDialog') : $('<div id="ModalDialog" style="display:hidden"></div>').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项目中的相应动作返回一个局部视图，然后显示在模态对话框中。

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

    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，它“模糊”模态对话框后面的页面

.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

它的占地面积非常小。

MVC3 Razor和Modal弹出窗口

3 个答案: