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文件...您可以从here下载所需的组件。

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

zip文件将包含一个css文件，相关图像和jQuery-ui javascript文件（您当前正在使用）。 css在名为“images”的文件夹中查找一些图像，因此只要图像在解决方案中位于名为images的文件夹中并且您引用了css，它就应该应用背景覆盖。

JQuery Modal对话框：Overlay不可见

1 个答案: