グリッドを表示するために DataTables jQuery プラグインを使用しています。フォーム全体の背景色と、前述のテーブルのヘッダーとフッターの背景色の背景色を誤って変更するモーダル ポップアップがあります。これは、ポップアップを初期化するために使用されるコードです:
var modalBackground = $("#modalBackground");
var Notifications_ArchiveHolder = $("#Notifications_ArchiveHolder");
var Notifications_ShowArchivePopupHolder = $("#Notifications_ShowArchivePopupHolder");
var ArchiveURL = "@Url.Action("Archive")";
var ShowArchiveUrl = "@Url.Action("ShowArchive")";
function ShowArchivePopup() {
$.get(ArchiveURL, function (content) {
if (Notifications_ArchiveHolder.html().length <= 10) {
Notifications_ArchiveHolder.html(content);
InitArchivePopup();
}
})
}
function InitArchivePopup() {
modalBackground.show();
//set up positon
var h = $(window).height();
var w = $(window).width();
var hh = Notifications_ArchiveHolder.height();
var hw = Notifications_ArchiveHolder.width();
var posx = (h / 2) - 100;
var posy = (w / 2) - 200;
Notifications_ArchiveHolder.css("position", "fixed");
Notifications_ArchiveHolder.css("top", posx);
Notifications_ArchiveHolder.css("left", posy);
Notifications_ArchiveHolder.show();
$("body").css("overflow", "hidden");
}
ポップアップは次の div でホストされます。
<div id="Notifications_ArchiveHolder" style="background-color: white; display: none; z-index: 9999;"></div>
これはCSSクラスのdivで、背景全体を灰色にし、テーブルのヘッダーとフッターの背景色も変更します:
<div id="modalBackground" class="graphicScreen" style="display: none; position: fixed; top: 0px; left: 0px;"></div>
.graphicScreen
{
position: fixed;
width: 100%;
height: 100%;
margin: 0;
padding: 50px;
background-color: #878786;
z-index: 9990;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
filter: alpha(opacity=30);
-moz-opacity: 0.3;
-khtml-opacity: 0.3;
opacity: 0.3;
}
なぜこれが起こるのか、それを防ぐ方法はありますか? 前もって感謝します。