javascript - Jquery插件-Ajax弹出

Question

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

我想使用这个插件在单击链接时弹出一个 View (在 MVC 中)。谁能告诉我正确的方向..谢谢..示例伪代码？

Answer 1

为什么不直接使用内置的 jQuery-ui？只需调用 $('#someDiv').Dialog(...) 即可使其工作。然后，您还可以使用 jQuery 主题滚轴网站来自定义您的外观 - 并且您正在处理“基线”jQuery 代码。

要保持与上面添加的 Darrin 相同的示例语法，以便于比较，请参见下文。

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

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

确保您在文件中进行链接(我为第二个文件选择了 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