JQuery Modal对话框:Overlay不可见

Question

我是JQuery的新手.我正在开发一个ASP.Net MVC应用程序.在其中一个视图中,我试图打开一个JQuery模态对话框.这是JavaScript的代码

<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript" />
<script src="@Url.Content("~/Scripts/jquery-ui-1.8.11.js")" type="text/javascript" />
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"/>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"/>
<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"/>

<script type="text/javascript">
    $(document).ready(function () 
    {
        $(".openDialogLink").
        live("click", function (e) 
        {
            e.preventDefault();
            $("<div></div>").addClass("dialogBoxDiv").appendTo("body").
            dialog(
            {
                modal: true, 
                draggable: true,
                overlay: { backgroundColor: "#000000", opacity: 0.5 }, 
                title: $(this).attr("DialogTitle"),
                show: "puff",
                hide: "puff",
                closeOnEscape: true,
                close: function () 
                {
                    $(this).remove()
                },
            }
            ).load(this.href);
        });
        $(".close").
        live("click", function (e) 
        {
            e.preventDefault();
            $(this).closest(".dialog").dialog("close");
        });
    }); 

问题是网页中未使用区域的叠加层不可见.看起来我缺少一些小设置.

请帮忙.

Answer 1

它似乎与背景叠加工作正常.

http://jsfiddle.net/8bwNU/

jQuery-ui css样式表使用图像来处理你正在使用的jQuery内容.如果您还没有其他地方,可能会添加css文件...您可以从此处下载所需的组件.

<link href="../../Content/jquery-ui-1.8.16.custom.css" rel="stylesheet" type="text/css" />

zip文件将包含一个css文件,相关图像和jQuery-ui javascript文件(您当前正在使用).css在名为"images"的文件夹中查找一些图像,因此只要图像在解决方案中位于名为images的文件夹中并且您引用了css,它就应该应用背景叠加.