2

我的视图中有一个链接，当用户单击该链接时，将执行以下 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>
4

1 回答 1

1

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

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

但是，使用那个确切的环境，您提供的 javascript 代码仍然无法工作。下面的更改（以及在jsFiddle 链接处）将按照您的预期进行：

$(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属性所做的更改必须正确驼峰式，否则 jQuery 将无法理解该属性。

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

于 2012-12-21T16:19:13.323 回答