页面/视图背景不模糊

我在我的视图中有一个链接，当用户单击该链接时，下面的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

页面/视图背景不模糊

回答

相关问题