请选择 进入手机版 | 继续访问电脑版
 找回密码
 立即注册

QQ登录

只需一步,快速开始

iamzhaiwei

初级会员

30

主题

100

帖子

260

积分

初级会员

积分
260

活字格认证

iamzhaiwei
初级会员   /  发表于:2014-2-21 16:41  /   查看:4512  /  回复:4
如图所示,报表遮挡了弹出框,怎么让它不遮挡?

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

4 个回复

倒序浏览
roger.wang
社区贡献组   /  发表于:2014-2-24 14:42:00
沙发
回复 1楼iamzhaiwei的帖子

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

能给个demo或者代码片段吗?
回复 使用道具 举报
iamzhaiwei
初级会员   /  发表于:2014-2-24 14:59:00
板凳
回复 2楼roger.wang的帖子

代码如下,单击“开始统计”,提交表单,返回的报表通过CreateSuccess()函数显示在div元素statisticsDisplay中。单击“选择类型”,在div控件typesdialog中显示弹出框,弹出框是用jQuery渲染的。弹出框被报表遮挡了。
  1. <script>
  2. function CreateSuccess(resStatistics) {
  3.             if (resStatistics.SignHide == true) {
  4.                 var typesSelect = document.getElementById("typesSelect");
  5.                 typesSelect.value = resStatistics.HideTypes;
  6.             }
  7.             $.ajax({
  8.                 url: "/ResStatistics/ResourceTypeMatrix",
  9.                 type: "POST",
  10.                 data: { transCondition: resStatistics.Condition, transTemplatePath: resStatistics.Path },
  11.                 dataType: "html",
  12.                 success: function (data) {
  13.                     $("#statisticsDisplay").empty();
  14.                     $("#statisticsDisplay").html(data);
  15.                 },
  16.                 error: function (XMLHttpRequest, textStatus, errorThrown) {
  17.                 }
  18.             });
  19.         }
  20. function OpenResTypesDialog(idName) {
  21.             $(idName).dialog({
  22.                 height: 260,
  23.                 width: 600,
  24.                 showTitle: false,
  25.                 position: { my: "center top", at: "center top" },
  26.                 buttons: {
  27.                     "确定": function () {
  28.                         var form = $("#formtypes");
  29.                         var data = form.serialize();

  30.                         $.ajax({
  31.                             url: form.attr('action'),
  32.                             type: form.attr('method'),
  33.                             data: data,
  34.                             dataType: "json",
  35.                             success: function (item) {
  36.                                 var typesSelect = document.getElementById("typesSelect");
  37.                                 typesSelect.value = item.TypesMessage;
  38.                                 var typeInHide = document.getElementById("selectTypeToHide");
  39.                                 typeInHide.value = item.TypesHideMessage;
  40.                                 $(idName).dialog("close");

  41.                                 $("#types").empty();
  42.                                 $("#types").html(data);
  43.                             },
  44.                             error: function (XMLHttpRequest, textStatus, errorThrown) {
  45.                                 $(idName).dialog("close");
  46.                             }
  47.                         });
  48.                     },
  49.                     "关闭": function () {
  50.                         $(idName).dialog("close");
  51.                     }
  52.                 },
  53.                 modal: true
  54.             });
  55.         }
  56. </script>

  57. <body>
  58.     <form id="createForm"  novalidate="novalidate" >
  59.         <div class="gray_bg">
  60.             <div class="content">
  61.                 <div class="input_field">
  62.                     <div class="input_display">
  63.                         统计类型:      
  64.                     </div>
  65.                      <a class="button_type_two button_two_color" onclick='OpenResTypesDialog("#typesdialog")'>选择类型</a>
  66.                 </div>
  67.                 <input type="submit" value="普查" id="sub" style="display:none" />
  68.                 <input type="text" value="" id="selectTypeToHide" name="selectTypeToHide" style="display:none" />
  69.             <div>
  70.                 <a class="button_type_one button_one_color button-right button_down" onclick="subForm()">开始统计</a>
  71.                 </div>
  72.             </div>
  73.             <div id ="statisticsDisplay">
  74.             </div>
  75.         </div>
  76.     </form>
  77.     <div id="typesdialog" title="选择资源类型" style="display: none">
  78.           <%Html.RenderPartial("ResTypeSelect", Model.ResTypes); %>
  79.     </div>
  80. </body>
复制代码
回复 使用道具 举报
roger.wang
社区贡献组   /  发表于:2014-2-24 15:45:00
地板
回复 3楼iamzhaiwei的帖子

代码看到了,写的不错。
回复 使用道具 举报
roger.wang
社区贡献组   /  发表于:2014-2-25 10:22:00
5#
回复 3楼iamzhaiwei的帖子

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

解决办法有2个:
1 整个页面不分上下2个window,则弹出对话框属于整体的,viewer不会遮住它。
2 整个页面分3个window,第一个整体window,然后在这个基础上分上下2个window。
   弹出对话框的时候,获取第一个整体的window,则可以让对话框在最上面。
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 立即注册
返回顶部