ASP.NET 应用程序无法在 iPad 上运行答案

【问题标题】：ASP.NET Application not working on iPadASP.NET 应用程序无法在 iPad 上运行
【发布时间】：2014-06-24 21:21:16
【问题描述】：

我有一个 ASP.NET 应用程序，但在 iPad 上运行时遇到问题。这是我的相关html代码：

<div style="display: none" id="dialogShowInvoice">
    <div style="width: 100%; height: 100%;" id="divInvoice"></div>
</div>

这是我相关的 jQuery/javascript 代码：

$(function() {
    $('#dialogShowInvoice').dialog({
        autoOpen: false,
        draggable: true,
        resizable: false,
        modal: true,
        title: 'Invoice',
        width: ($(window).width() - 50),
        height: ($(window).height() - 50),
        closeOnEscape: true
    });

...
...

    $('.showInvoiceButton').click(function (event) {
        $('#dialogShowInvoice').dialog('open');
        $('#divInvoice').html("<iframe src='ShowInvoiceHandler.ashx?id=" + event.target.id.replace('btnShowInvoice', '') + "'></iframe>");
        $('#divInvoice iframe').height($(window).height() - 125);
        $('#divInvoice iframe').width($(window).width() - 100);
    });
});

现在在 Internet Explorer、Chrome 和 FireFox 中，一切都运行良好。在 Galaxy Tab 上，它也很好用。我遇到的唯一问题是 iPad。在 iPad 上，jQuery 窗口确实会弹出，但它的内部是灰色的（即 iframe 区域）并且没有任何反应。但是，如果我移动 jQuery 窗口（因为它是可拖动的），PDF 会突然出现。我所要做的就是将 jQuery 窗口向任意方向拖动一个像素，这会以某种方式使 PDF 显示在窗口内。

什么可能导致 iPad 上出现这种奇怪的行为，如何解决 PDF 自动显示而无需拖动 jQuery 窗口的问题？

编辑： 值得一提的是，它不会在 Safari 上执行此操作，而是在 iMac 上运行。从字面上看，这个问题似乎只出在 iPad 设备上。

【问题讨论】：

标签： jquery asp.net ipad jquery-ui pdf

【解决方案1】：

Safari 中的“modal: true”似乎存在问题，并且在调整对话框窗口大小或移动对话框窗口之前它不会呈现 iframe 的内容。

有效的解决方案是设置

modal: false,

如果您需要一个模态窗口，您可以添加另一个“层”，它将禁用所有内容并在其上显示非模态对话框。

 <style>
   #overlay {
      background-color: rgba(0, 0, 0, 0.8);
      z-index: 99;
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      display: none;
   }

   #dialogShowInvoice
   {
      z-index: 9999 
   }
 </style>

 ...
 <div id="overlay"></div>

然后在打开对话框之前禁用屏幕

$('.showInvoiceButton').click(function (event) {
     $("#overlay").show();
     ...

并在对话框关闭时再次启用它

$('#dialogShowInvoice').dialog({
    ...
    modal: false,
    ...,
    close: function( event, ui ) {
       $("#overlay").hide();
    }
});

演示：http://jsbin.com/lumoweja/1#

【讨论】：