私のページの機能:
ユーザーはレポートを選択し、いくつかのパラメーターを選択してからプレビュー ボタンをクリックします。これにより、Crystal レポートが呼び出されてレポートが実行され、結果が PDF としてエクスポートされます。PDF ファイルを表示するオブジェクト タグを持つ DIV があります。
その後、レポートを自動的に実行するスケジュールを設定できます。このスケジュール セクションでは、日付ピッカーを使用して、スケジュールの開始日と終了日を選択します。
PDF を (IE で) 表示すると、日付ピッカーがブロックされます。オブジェクトが単純な HTML ファイルを表示する場合、datepicker オーバーレイは問題なく表示されます。したがって、最上位の要素であることを要求するのは、PDF ビューアーに関するものです。
ここに私が使用している簡単なテストがあります:
<html>
<head>
<link href="styles/jquery-ui-1.8.12.custom.css" rel="stylesheet" type="text/css" />
<link href="styles/timepicker.css" rel="stylesheet" type="text/css" />
<script src="scripts/jquery-1.5.1.min.js" type="text/javascript"></script>
<script src="scripts/jquery-ui-1.8.12.custom.min.js" type="text/javascript"></script>
<script src="scripts/jquery-timepicker.js" type="text/javascript"></script>
<!--[if IE]><script type="text/javascript" src="scripts/jquery.bgiframe.js"></script><![endif]-->
<script type="text/javascript">
$(document).ready(function() {
$('#txtStartDate').datepicker({minDate: new Date()});
$('#txtEndDate').datepicker({minDate: new Date()});
$('#txtTime').timepicker();
});
</script>
</head>
<body>
<form id="mainForm">
<div id="divSchedule" style="z-index:2;font-family:Arial;font-size:8.5pt">
<table cellpadding="3px" cellspacing="0" style="width:600px;display:block;padding: 0px 3px 0px 0px">
<tr><td colspan="7"><div style="width:100%;border-bottom:1px solid #F3C13D;color:#0067AC">Schedule automated report delivery</div></td></tr>
<tr>
<td><span>Start Date:</span></td>
<td><input id="txtStartDate" type="text" style="width:70px"/></td>
<td><span>End Date:</span></td>
<td><input id="txtEndDate" type="text" style="width:70px"/></td>
<td><span>Time:</span></td>
<td><input type="text" id="txtTime" style="width:70px"/></td>
<td> </td>
</tr>
<tr>
<td colspan="2">
<span>via:</span>
<input type="radio" name="rdoScheduleVia" value="Printer">Printer
<input type="radio" name="rdoScheduleVia" value="Email">Email
</td>
<td><span id="lblViaText">Printer Name:</span></td>
<td colspan="3"><input id="txtViaText" style="width:235px"/></td>
<td>
<input type="button" ID="btnPrinterName" value="Select Printer" Class="LoginButton" Width="115px" />
</td>
</tr>
<tr>
<td colspan="5">
<div style="widht:100%;align:right"><input type="button" ID="btnSaveSchedule" Class="LoginButton" value="Save" /></div>
</td>
<td>
<input type="button" ID="btnCancel" Class="LoginButton" value="Cancel" />
</td>
</tr>
</table>
</div>
<div id="divPDFView" style="z-index:1;height:300px;witdh:400px;border:1px solid blue">
<object ID="objPrevReport" data="test.pdf" type="application/pdf" style="position:relative;z-index:-1;width:100%;height:100%">
alt : <a href="test.pdf">test.pdf</a>
</object>
</div>
</form>
</body>
</html>
jQuery-ui-1.8.12 のセクション。カスタム。z-index を 10 に変更した datepicker の Css
/* IE6 IFRAME FIX (taken from datepicker 1.5.3 */
. Ui-datepicker-cover {
display: none; /*sorry for IE5*/
display/**/: block; /*sorry for IE5*/
position: relative; /*must have*/
z-index: 10; /*must have*/
filter: mask(); /*must have*/
top: -4px; /*must have*/
left: -4px; /*must have*/
width: 200px; /*must have*/
height: 200px; /*must have*/
}/*
これは Firefox 4 で機能し、IE が使用するのと同じビューアーをロードします。FF がそれについて考えてから実行することを決定したかのように、datepicker の下部を表示するのに遅延があります。
Chrome で動作 (独自の PDF ビューアーを使用)
IE8 と IE9 は、datepicker ポップアップの下部を非表示にすることで同じことを行います
また、ビューアーが Adobe であるか PDF-Xchanger であるかに関係なく、同じ結果が得られます (非常に優れた PDF ビューアーの代替手段)。
どんな援助でも大歓迎です！