.layer{filter:alpha(opacity=50); /* IE */ -moz-opacity:0.5; /* Moz + FF */ opacity:0.5; margin-left:-180px;position:absolute; z-index:99; text-align:center; padding:20px; border:1px,solid,red; }
<html>
<body>
<table>
<tr>
<td style="width: 300px;height: 300px" rowspan="<#=listcount #>"> <div id="curr_sparkline" style="width: 100%; height: 100%;"> </div> <div id="divAnswer" class="layer" style="width: 100%; height: 100%; display:none"> </div> </td>
</tr>
</table>
</body>
</html>
<script>
$(document).ready(function () {
//页面缩放：保持遮罩层位置和被遮罩层位置一致
$(window).resize(function() { $("#divAnswer").css("left",$("#curr_sparkline").offset().left+ 178+"px"); $("#divAnswer").css("top",$("#curr_sparkline").offset().top+"px"); });
//显示遮罩层
$("#ActivitySubmit").click(function () { var width=$("#curr_sparkline").width(); var height=$("#curr_sparkline").height(); $("#divAnswer").css("width",300); $("#divAnswer").css("height",300); $("#divAnswer").css("left",$("#curr_sparkline").offset().left+ 166+"px"); $("#divAnswer").css("top",$("#curr_sparkline").offset().top+"px"); $("#divAnswer").show();
});
});
//添加连线 jqplot:页面图形插件--很强大
详细参数：http://hi.baidu.com/xuchao_duizhang/blog/item/8f41082a2877c9365343c128.html function SetLine(dataobj,colorobj,divobj) { if (dataobj.length < 1) { $("#" + divobj ).html(""); return; } var totalHight = parseInt($("#hidcount").val()) + 1;
$.jqplot(divobj, dataobj, { gridPadding: { top: 0, right: 0, bottom: 0, left: 0 }, axes: { xaxis: { showTicks: false, showTickMarks: false }, yaxis: { showTicks: false, showTickMarks: false, min: 4, max: totalHight*10-4 } }, title: { text: '', show: false }, seriesDefaults: { showMarker: true, style: 'filledCircle', color: colorobj }, grid: { lineWidth: 2, drawGridLines: false, gridLineColor: '#fffdf6', background: '#ffffff', borderColor: '#ffffff', borderWidth: 0, shadow: false } }); }
</script>
