L'arrière-plan de la page/de la vue n'est pas flou

Question

J'ai un lien dans ma vue et lorsque les utilisateurs cliquent sur ce lien, le fichier JS suivant s'exécute. Ce que j'essaie de faire, c'est de désactiver ou d'estomper l'arrière-plan lorsque la boîte de dialogue est ouverte. Je sais qu'il existe des plugins spécifiques pour cela, par exemple BlockUI, mais j'ai vu cet exemple http://jsfiddle.net/tctc2/105/ et cela fonctionne bien. J'ai utilisé la même logique, mais le fond de ma page ne s'estompe pas.

JS pour la boîte de dialogue :

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");

});

VIEW :

La div en question est : runDatestreeview et le lien qui ouvre cette boîte de dialogue se trouve juste au-dessus d'elle dans l'exemple suivant :

<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

J'ai réussi à faire fonctionner votre code comme prévu. Quelques points d'abord.

L'exemple que vous avez montré à http://jsfiddle.net/tctc2/105/ utilise une très ancienne version de jQuery (1.6.3). Cela signifie que les méthodes et les actions présentées dans l'exemple ne seront pas compatibles avec les versions plus récentes de jQuery. Vous pouvez voir cela en action en changeant la bibliothèque jQuery pour, disons, la version 1.8.2 et en essayant d'exécuter l'exemple. Il échoue.

Cependant, en utilisant cet environnement exact, le code javascript tel que vous l'avez fourni ne fonctionne toujours pas. Les changements ci-dessous (et à la page Lien jsFiddle ) se comportera comme prévu :

$(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");

});

Les modifications que j'ai apportées concernent la variable RunDialog , autoOpen doit être correctement mis en majuscules, sinon jQuery ne comprendra pas l'attribut.

Là encore, cela n'est possible qu'avec l'environnement jQuery V 1.6.3 et jQuery UI 1.8.16. Si vous souhaitez utiliser la bibliothèque jQuery la plus récente, vous devrez réécrire le code pour qu'il soit compatible avec les versions les plus récentes.