Question

我发现这个出色的插件用于为MVC弹出ajax名为SimleModal，但是我无法让它工作。 http://www.ericmmartin.com/projects/simplemodal/是该网站。

我希望在点击链接时使用此插件弹出视图（在MVC中）。任何人都可以在这里向我展示正确的方向..谢谢......样本伪代码？

Answer 1

为什么不使用内置的jQuery-ui？只需调用$（'＃someDiv'）。对话框（...）即可使其正常工作。然后你可以使用jQuery主题滚动网站来定制你的外观 - 你正在处理'基线'jQuery代码。

为了便于比较，保留上面添加的Darrin相同的示例语法，请参阅下文。

配置您的小部件选项并下载它们（您可以从大量小部件中进行选择 - 如果您愿意，可以选择对话框或其他请执行以下操作：http://jqueryui.com/download

确保引用css文件，jquery和jquery ui。下载jQuery ui并将/ images文件夹放入/ content文件夹以及css文件。

确保您链接文件（我选择google作为第二个文件 - 如果您愿意，可以选择自己的本地文件）


<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.min.js"></script>
<link href="@Url.Content("~/Content/jquery-ui-1.8.13.custom.css")" rel="stylesheet" type="text/css" />

调用它就像：


<div id="result">bipbip</div>
<script type="text/javascript">
    $(document).ready(function () {
    //initialize the dialog
        $("#result").dialog({ width: 400, resizable: false, position: 'center', title: 'My Dialog', autoOpen: false,
         buttons: { "Ok": function() { $(this).dialog("close"); } } 
         });
    });

    $(function () {
        $('#modal').click(function () {
            //load the content from this.href, then turn it into a dialog.

            $('#result').load(this.href).dialog('open');
            return false;
        });
    });
</script>

@Html.ActionLink("show modal", "Index2", null, new { id = "modal" })

有关对话框的详细信息，请参阅：http://docs.jquery.com/UI/Dialog

Answer 2

控制器：

public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View();
    }

    public ActionResult Modal()
    {
        return PartialView();
    }
}

查看：

<script src="@Url.Content("~/Scripts/jquery.simplemodal-1.4.1.js")" type="text/javascript"></script>
<script type="text/javascript">
    $(function () {
        $('#modal').click(function () {
            $.get(this.href, function (data) {
                $.modal(data, {
                    containerId: 'result'
                });
            });
            return false;
        });
    });
</script>

@Html.ActionLink("show modal", "modal", null, new { id = "modal" })

<div id="result"></div>

现在当您点击“显示模式”链接时，AJAX请求将发送到Modal上的HomeController操作，生成的部分视图将显示在结果div中（所以不要忘记在~/Views/Home/Modal.cshtml）中提供一个。

另外，请务必查看文档中的examples section以了解其他可用选项。

Jquery插件 - Ajax弹出

2 个答案: