我的页面做什么:
用户选择一个报表,选择一些参数,然后点击预览按钮,调用水晶报表运行报表并将结果导出为PDF。我有一个 DIV,它有一个对象标签来显示 PDF 文件。
然后,他们可以设置一个计划来自动为他们运行报告。此计划部分使用日期选择器来选择计划的开始日期和结束日期。
显示 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 的日期选择器的 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 正在考虑它然后决定这样做。
在 Chrome 中工作(使用它自己的 PDF 查看器)
IE8 和 IE9 在隐藏日期选择器弹出窗口的下部时做同样的事情
无论查看器是 Adobe 还是 PDF-Xchanger,我都有相同的结果(非常好的 PDF 查看器替代品)
任何帮助将不胜感激!