使用带有VS2010的asp.net mvc 4中的jqueryUI打开模态窗口

时间:2013-05-06 20:06:41

标签: c# jquery asp.net-mvc razor

我试图在我的asp.net mvc 4项目中点击一个链接打开一个模态窗口。我写的代码没有任何反应。我错过了什么?我在网站管理员中引用了这些链接。

<link type="text/css" href="@Url.Content("~/Content/custom.css")" rel="Stylesheet" />   
<script type="text/javascript" src="@Url.Content("~/Scripts/jquery-1.9.1.js")" ></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/jquery-ui-1.10.3.custom.min.js")"></script>

这是我的代码

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/SiteMaster.cshtml";
}


<div id="dialogMsg" title="I'm Title of dialog">
            Hello I'm dialog body.
</div>


<a href="#" id="thelink">Open Dialog</a>



<script type="text/javascript">


    $(document).ready(function () {



        $("#dialogMsg").dialog({
            autoOpen: false,
            height: 300,
            width: 350,
            modal: true,
            buttons: {
                "Do something": function () {
                    var bValid = true;

                    $(this).dialog("close");

                },
                Cancel: function () {
                    $(this).dialog("close");
                }
            },
            close: function () {
                allFields.val("").removeClass("ui-state-error");
            }
        });




        $('#thelink')
        .click(function () {
            $('dialogMsg').dialog('open');
        });
    });
</script>

1 个答案:

答案 0 :(得分:3)

您错过了实际打开对话框的选择器上的#。见这里:

$('#thelink')
    .click(function () {
        $('dialogMsg').dialog('open');
    });

将其更改为:

$('#thelink')
    .click(function () {
        $('#dialogMsg').dialog('open');
    });