我的视图中有一个链接,当用户点击该链接时,会执行以下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)
@Html.DropDownList("Hour", ListHelpers.HourList())
:
@Html.DropDownList("Minute", ListHelpers.Minute15List())
@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>
答案 0 :(得分: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库,则需要重写代码以与新版本兼容。