页面/视图背景不模糊

Question

我的视图中有一个链接，当用户点击该链接时，会执行以下JS文件。我想要做的是在对话框打开时禁用或排序模糊背景。我知道有一些特定的插件，例如BlockUI，但我看到了这个例子http://jsfiddle.net/tctc2/105/，它工作正常。我使用了相同的逻辑，但我的页面背景并没有模糊。

对话框的JS文件：

var RunDialog;

$(document).ready(function () {

    RunDialog = $("#runDatestreeview").dialog({ resizable: false, autoopen: false, height: 140, modal: true, width: 630, height: 400,
        buttons: { "Continue": function () {
            $.post("/RunLogEntry/Create", $("#form").serialize(), function (json) {

            }, "json");
        },
            Cancel: function () {
                $(this).dialog("close");
            }
        }
    });

    $('#RunDatesChildDialogLink').click(function () {
        RunDialog.dialog('open');
        $("#runDatestreeview").parent().appendTo("form");
        return false;
    });

    $("#runDatestreeview").parent().appendTo("form");

});

查看：

有问题的div是：runDatestreeview，打开此对话框的链接就在下方：

<fieldset>
    <legend>Enter a new Run Log Entry</legend>
    @using (Html.BeginForm("Create", "RunLogEntry", FormMethod.Post, new { id = "form", enctype = "multipart/form-data" }))
    {

        @*<div id="test">*@
            @Html.ValidationSummary(true)
            <div class="exception">@(ViewBag.ErrorMessage)</div>
            <div class="bodyContent">
                <span class="leftContent">Load List File (Select): </span><span class="rightContent">
                    <input type="file" name="file" id="file1" style="width: 500px" />
                </span>
            </div>
            if (Model.LoadListStoredFileName != null) {
            <div class="bodyContent">
                <span class="leftContent">Attached Load List: </span><span class="rightContent">
                    @Html.ActionLink(Model.LoadListFileName, "Download", new { @file = Model.LoadListStoredFileName })
                </span>
            </div>
            }
            <div class="bodyContent">
                <span class="leftContent">Output File (Select): </span><span class="rightContent">
                    <input type="file" name="file" id="file2" style="width: 500px" />
                </span>
            </div>
            if (Model.OutputStoredFileName != null) {
            <div class="bodyContent">
                <span class="leftContent">Attached Output: </span><span class="rightContent">
                    @Html.ActionLink(Model.OutputFileName, "Download", new { @file = Model.OutputStoredFileName })
                </span>
            </div>
            }
            <div class="bodyContent">
                <span class="leftContent">.LOG File(s) -Zip: </span><span class="rightContent">
                    <input type="file" name="file" id="file3" style="width: 500px" />
                </span>
            </div>
            <div class="bodyContent">
                <span class="leftContent">Import Files: </span>
                <button name="submit" class="art-button" type="submit" value="Upload" style="width: 100px">
                    Upload</button>
                <button name="submit" class="art-button" type="submit" value="Remove" style="width: 100px">
                    Remove</button>
            </div>
            <div class="bodyContent">
                <span class="leftContent">
                    @Html.Label("Operator")
                </span><span class="rightContent">
                    @Html.DropDownList("OperatorID", String.Empty)
                </span>
            </div>
            <div class="bodyContent">
                <span class="leftContent">
                    @Html.Label("Run ID")
                </span><span class="rightContent">[Generated] </span>
            </div>
            <div class="bodyContent">
                <span class="leftContent">
                    @Html.Label("Run Start Date / Time")
                </span><span class="rightContent">
                    @Html.EditorFor(model => model.RunDate)
                    &nbsp;
                    @Html.DropDownList("Hour", ListHelpers.HourList())
                    :
                    @Html.DropDownList("Minute", ListHelpers.Minute15List())
                    &nbsp;
                    @Html.DropDownList("AMPM", ListHelpers.AMPMList())
                </span>
            </div>
            <div class="bodyContent">
                <span class="leftContent">
                    @Html.Label("System")
                </span><span class="rightContent">
                    @Html.DropDownList("SystemID", String.Empty)
                </span>
            </div>
            <div class="bodyContent">
                <span class="leftContent">
                    @Html.Label("Run Type")
                </span><span class="rightContent">
                    @Html.DropDownList("RunTypeID", String.Empty)
                </span>
            </div>
            <div class="bodyContent">
                <span class="leftContent">
                    @Html.Label("Run Description")
                </span><span class="rightContent">
                    @Html.TextAreaFor(model => model.RunDescription, new { style = "width: 600px; height=30px" })
                </span>
            </div>
            <div class="bodyContent">
                <span class="leftContent">
                    @Html.Label("Assay Performance Issues")
                </span><span class="rightContent">
                    @Html.DropDownList("AssayPerformanceIssues1", ListHelpers.YesNoList())
                </span>
            </div>
            <div class="bodyContent">
                <span class="leftContent">
                    @Html.Label("Tests/Cycles Requested")
                </span><span class="rightContent">
                    @Html.EditorFor(model => model.SPTestsRequested)
                </span>
            </div>
            <div class="bodyContent">
                <span class="leftContent">
                    @Html.Label("Tests/Cycles Completed")
                </span><span class="rightContent">
                    @Html.EditorFor(model => model.SPTestsCompleted)
                </span>
            </div>
            <div class="bodyContent">
                <span class="leftContent">
                    @Html.Label("Run Status")
                </span><span class="rightContent">
                    @Html.DropDownList("RunStatusID", String.Empty)
                </span>
            </div>
            <div class="bodyContent">
                <span class="leftContent">
                    @Html.Label("Assay")
                </span><span class="rightContent">
                    @Html.ListBoxFor(model => model.SelectedAssayIDs, new MultiSelectList(RunLog.Domain.Lists.GlobalList.AssayListItems(), "ID", "Name", Model.SelectedAssayIDs))
                </span>
            </div>
            <div class="bodyContent">
                <span class="leftContent">
                    @Html.Label("Error Code")
                </span><span class="rightContent"><span id="ChildDialogLink" class="treeViewLink">Click
                    here to Select Error Codes</span>
                    <br />
                    <span id="ErrorCodeDisplay" style="cursor: pointer; text-decoration: underline;">@(Model.ErrorDescription)</span>
                    @Html.HiddenFor(model => model.ErrorDescription)
                </span>
            </div>
            <div class="bodyContent">
                @if (Model.TestExceptionDisplay != null && Model.TestExceptionDisplay.Count() > 0)
                {
                    <span class="leftContent">
                        @Html.Label("Test Exceptions")
                    </span><span class="rightContent"><span id="TestExceptionChildDialogLink" class="treeViewLink">
                        Click here to View Test Exceptions</span>
                        <br />
                        <span id="TestExceptionDisplayy"></span></span>
                }
            </div>
            <div id="testExceptiontreeview" title="Dialog Title" style="font-size: 10px; font-weight: normal;
                overflow: scroll; width: 800px; height: 450px; display: none;">
                <table class="grid" style="width: 600px; margin: 3px 3px 3px 3px;">
                    <thead>
                        <tr>
                            <th>
                                Exception
                            </th>
                            <th>
                                Frequency
                            </th>
                            <th>
                                Comment
                            </th>
                            <th>
                                Replicate Range
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        @if (Model.TestExceptionDisplay != null)
                        {
                            @Html.EditorFor(x => x.TestExceptionDisplay)
                        }
                    </tbody>
                </table>
            </div>
            @*test div end here*@
        @*</div>*@
        <div class="bodyContent">
            <span class="leftContent">
                @Html.Label("Run Dates")
            </span><span class="rightContent"><span id="RunDatesChildDialogLink" class="treeViewLink">
                Click here to Select Run Dates</span>
                <br />
                <span id="RunDatesDisplayy"></span></span>
        </div>
        <div id="runDatestreeview" title="Dialog Title" style="font-size: 10px; font-weight: normal;
            overflow: scroll; width: 800px; height: 450px; display: none;">
            <table class="grid" style="width: 600px; margin: 3px 3px 3px 3px;">
                <thead>
                    <tr>
                        <th>
                            Run Dates:
                        </th>
                    </tr>
                </thead>
                <tbody>
                    @Html.EditorFor(x => x.RunDatesDisplay)
                </tbody>
            </table>
        </div>
        <div class="bodyContent">
            <span class="leftContent">
                @Html.Label("Service Entry Request")
            </span><span class="rightContent">
                @Html.DropDownList("ServiceRequest", ListHelpers.YesNoList())
            </span>
        </div>
        <div class="bodyContent">
            <span class="leftContent">
                @Html.Label("Problem Description")
            </span><span class="rightContent">
                @Html.TextArea("ProblemDescription", new { style = "width: 600px; height: 30px" })
            </span>
        </div>
           if (Model.UserRole == "Admin" || Model.UserRole == "SuperUser")
           {
        <div class="bodyContent">
            <span class="leftContent">
                @Html.Label("Active")
            </span><span class="rightContent">
                @Html.CheckBoxFor(model => model.Active)
            </span>
        </div>
           }
           else
           {
        @Html.HiddenFor(model => model.Active)
           }
        <p>
            <input id="LogType" type="hidden" value="Run" />
            <input id="ID" type="hidden" value="0" />
            @if (Model.ExitCode == "1")
            {
                @Html.Hidden("ExitCode", Model.ExitCode)
            }
            else
            {
                <input id="ExitCode" type="hidden" value='0' />
            }
        </p>
        @Html.HiddenFor(model => model.MaxReplicateId)
        @Html.HiddenFor(model => model.MinReplicateId)
        @Html.HiddenFor(model => model.OutputFileName)
        @Html.HiddenFor(model => model.OutputStoredFileName)
        @Html.HiddenFor(model => model.LoadListFileName)
        @Html.HiddenFor(model => model.LoadListStoredFileName)
        @Html.HiddenFor(model => model.MinTestCompletionDate)
        @Html.HiddenFor(model => model.MaxTestCompletionDate)
        @Html.HiddenFor(model => model.UserRole)
        @Html.HiddenFor(model => model.Active)
        @Html.HiddenFor(model => model.ReplicateBlocksConfirmation)
        <div class="bodyContent">
            <span class="leftContent"></span><span class="rightContent">
                <button id="submit" name="submit" class="art-button" type="submit" value="Create">
                    Create</button></span>
        </div>

    }
</fieldset>
<script src="@Url.Content("~/Scripts/exitCode.js")" type="text/javascript"></script>
<div id="treeview" title="Dialog Title" style="font-size: 10px; font-weight: normal;
    overflow: scroll; width: 800px; height: 450px;">
    <div id="errorCodes">
        @Html.RenderTree(CacheHelper.ErrorCodes(), ec => ec.Name, ec => ec.Children.ToList(), ec => (ec.ID).ToString(), null, "e")
        @* @Html.RenderTree(RunLog.Domain.Lists.GlobalList.ErrorCodes(), ec => ec.Name, ec => ec.Children.ToList(), ec => (ec.ID).ToString(), null, "e")

  *@
    </div>
    <div id="inputReps" style="display: none;">
    </div>
</div>

Answer 1

好吧，所以我设法让你的代码按预期工作。先做几件事。

您在http://jsfiddle.net/tctc2/105/展示的示例使用了非常旧版本的jQuery（1.6.3）。这意味着该示例显示的方法和操作将与较新的jQuery版本不兼容。您可以通过将jQuery库更改为1.8.2版并尝试运行该示例来查看此操作。 失败。

但是，使用该确切的环境，您提供的javascript代码仍然无效。以下（以及jsFiddle link）的更改将按预期运行：

$(document).ready(function() {

   var RunDialog = $("#runDatestreeview").dialog({
        resizable: false,
        autoOpen: false,
        height: 200,
        modal: true,
        width: 630,
        buttons: {
            "Continue": function() {
                $.post("/echo/json/", $("#form").serialize(), function(json) {

                }, "json");
            },
            "Cancel": function() {
                $(this).dialog("close");
            }
        }
    });

    $('#RunDatesChildDialogLink').click(function() {
        RunDialog.dialog('open');
        $("#runDatestreeview").parent().appendTo("form");
        return false;
    });

    $("#runDatestreeview").parent().appendTo("form");

});

我对变量RunDialog，autoOpen属性所做的更改必须是正确的camelCased，否则jQuery将无法理解该属性。

同样，这只适用于V 1.6.3和jQuery UI 1.8.16的jQuery环境。如果您希望使用最新的jQuery库，则需要重写代码以与新版本兼容。