ビュー内にリンクがあり、ユーザーがそのリンクをクリックすると、次の 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>