頁面/視圖背景不模糊

我在我的視圖中有一個鏈接，當用戶單擊該鏈接時，下面的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"); 

});

VIEW：

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>

來源

2012-12-21 tam tam

您是否也可以顯示相關的HTML。 – PenguinCoder

@PenguinCoder道歉，我只是包括視圖。它有太多的元素，但我希望我包含足夠的描述來解決這個問題 –

好的，所以我設法讓你的代碼按預期工作編輯。首先有幾件事。

您在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屬性必須正確或駝峯jQuery將無法理解的屬性。

同樣，這隻適用於V1.6.3和jQuery UI 1.8.16的jQuery環境。如果你想利用最新的jQuery庫，你需要重寫代碼以與新版本兼容。

來源

2012-12-21 16:19:13 PenguinCoder

頁面/視圖背景不模糊

回答

相關問題