报表遮挡了弹出框

登录

如图所示，报表遮挡了弹出框，怎么让它不遮挡？

roger.wang · roger.wang

回复 1楼iamzhaiwei的帖子

弹窗口是通过那个按钮触发的？看您的截图：报表Viewer是在UI布局的下部。

能给个demo或者代码片段吗？

iamzhaiwei · iamzhaiwei

回复 2楼roger.wang的帖子

代码如下，单击“开始统计”，提交表单，返回的报表通过CreateSuccess()函数显示在div元素statisticsDisplay中。单击“选择类型”，在div控件typesdialog中显示弹出框，弹出框是用jQuery渲染的。弹出框被报表遮挡了。

<script>
function CreateSuccess(resStatistics) {
if (resStatistics.SignHide == true) {
var typesSelect = document.getElementById("typesSelect");
typesSelect.value = resStatistics.HideTypes;
}
$.ajax({
url: "/ResStatistics/ResourceTypeMatrix",
type: "POST",
data: { transCondition: resStatistics.Condition, transTemplatePath: resStatistics.Path },
dataType: "html",
success: function (data) {
$("#statisticsDisplay").empty();
$("#statisticsDisplay").html(data);
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
}
});
}
function OpenResTypesDialog(idName) {
$(idName).dialog({
height: 260,
width: 600,
showTitle: false,
position: { my: "center top", at: "center top" },
buttons: {
"确定": function () {
var form = $("#formtypes");
var data = form.serialize();
$.ajax({
url: form.attr('action'),
type: form.attr('method'),
data: data,
dataType: "json",
success: function (item) {
var typesSelect = document.getElementById("typesSelect");
typesSelect.value = item.TypesMessage;
var typeInHide = document.getElementById("selectTypeToHide");
typeInHide.value = item.TypesHideMessage;
$(idName).dialog("close");
$("#types").empty();
$("#types").html(data);
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
$(idName).dialog("close");
}
});
},
"关闭": function () {
$(idName).dialog("close");
}
},
modal: true
});
}
</script>
<body>
<form id="createForm" novalidate="novalidate" >
<div class="gray_bg">
<div class="content">
<div class="input_field">
<div class="input_display">
统计类型:
</div>
<a class="button_type_two button_two_color" onclick='OpenResTypesDialog("#typesdialog")'>选择类型</a>
</div>
<input type="submit" value="普查" id="sub" style="display:none" />
<input type="text" value="" id="selectTypeToHide" name="selectTypeToHide" style="display:none" />
<div>
<a class="button_type_one button_one_color button-right button_down" onclick="subForm()">开始统计</a>
</div>
</div>
<div id ="statisticsDisplay">
</div>
</div>
</form>
<div id="typesdialog" title="选择资源类型" style="display: none">
<%Html.RenderPartial("ResTypeSelect", Model.ResTypes); %>
</div>
</body>

复制代码

roger.wang · roger.wang

回复 3楼iamzhaiwei的帖子

代码看到了，写的不错。

roger.wang · roger.wang

回复 3楼iamzhaiwei的帖子

基于1#截图和3#代码片段分析：
报表遮住了弹出框是因为整个页面分为上下2个window(iframe)，当点击开始统计，jquery弹出的对话框隶属上部分的window，故会出现“报表遮挡了弹出框”的现象。

解决办法有2个：
1 整个页面不分上下2个window，则弹出对话框属于整体的，viewer不会遮住它。
2 整个页面分3个window，第一个整体window，然后在这个基础上分上下2个window。
弹出对话框的时候，获取第一个整体的window，则可以让对话框在最上面。

		自动登录	找回密码
密码			立即注册

报表遮挡了弹出框

本帖子中包含更多资源

4 个回复

活字格认证

微信认证勋章

元老葡萄