只有从选择菜单中选择选项后，Bootstrap 3 模态才会在 iPad Safari 上消失答案

【问题标题】：Bootstrap 3 modal disappears on iPad Safari only after choosing option from select menu只有从选择菜单中选择选项后，Bootstrap 3 模态才会在 iPad Safari 上消失
【发布时间】：2015-04-06 05:23:01
【问题描述】：

我在一个 Web 应用程序中有一个注册功能，它引导用户通过四个步骤向网站添加信息。当用户单击“添加”按钮时，会出现一个 Bootstrap 模式，用户从第 1 步开始。

每个步骤都有一个供用户选择的选项菜单，每个步骤中填充的数据取决于前面步骤的选择。用户可以将一个步骤留空并继续，但随后他们将无法为该过程的其余部分做出选择。此功能在除 iPad 上的 Safari 之外的所有桌面和移动浏览器中都按预期运行。

在 Safari 中，用户将打开模式，在第 1 步中选择数据，然后转到第 2 步。如果用户在此下拉列表中没有选择任何内容，他们可以继续第 3 步。但是，如果他们做出了选择在第 2 步中，模式消失，用户无法继续。这只发生在 iPad/iPhone 的 Safari 中。

我尝试在 iPad 上设置 Web 检查器并在 Mac 上加载控制台，但控制台中没有错误或其他使用消息。我试图弄清楚这是否是 Safari 中的一个错误，或者 Safari 是否以不同于其他浏览器的方式处理来自选择标记的模式输入。

【问题讨论】：

有一个类似的问题，在 iPad Air 上，当点击这个 modal 中的任何元素后，bootstrap 的 modal 会消失
可能相关：github.com/twbs/bootstrap/issues/14975

标签： ios twitter-bootstrap mobile-safari bootstrap-modal

【解决方案1】：

请开发者朋友看看。他添加了这个功能：

jQuery.usingSafari = function(allowDevices){
allowDevices = allowDevices != undefined ?  allowDevices : true;
if(!allowDevices){
    return /iPhone|iPad|iPod|Safari/i.test(navigator.userAgent)  
        && navigator.userAgent.indexOf('Chrome') == -1 
        && navigator.userAgent.indexOf('iPhone') == -1
        && navigator.userAgent.indexOf('iPad') == -1 
        && navigator.userAgent.indexOf('iPod') == -1;
} else{
    var results =  /iPhone|iPad|iPod|Safari/i.test(navigator.userAgent) &&    navigator.userAgent.indexOf('Chrome') == -1;
    return results;
}

}

//Disable backdrop
if(jQuery.usingSafari(false)) {
document.write('<style>div.modal-backdrop{ display:none; }</style>');

}

然后是模态调用：

    jQuery('#player-lightbox').modal({
            backdrop: jQuery.usingSafari(true) ? "static" : true,
            show:true}
        );

这似乎解决了问题。希望这对其他人有帮助！

【讨论】：

【解决方案2】：

这似乎是由fade 转换引起的。我首先检测应用程序是否在 iOS 上运行，然后查询 .modal 元素并删除类 fade。这解决了 iPad/iPhone 上的问题。注意：模态背景可能需要一些额外的努力才能使虚拟键盘弹出和弹出的效果更好。

举例说明：

if(isIOS())
  $('.modal').removeClass('fade');

编辑：还需要 iPad（水平）

$('.modal').on('shown.bs.modal', function () {
   $(this).find('.modal-backdrop').css('position', 'absolute');
});

【讨论】：

【解决方案3】：

我有一个类似的问题，容器内的下拉列表在进行选择时消失了，这仅发生在实际的 IPAD 设备上（在 chrome 中检查设备工具栏并选择了“IPAD”工作正常）。这似乎是上面评论中提到的一个已知错误。

将容器的 css 更改为 position: absolute 为我解决了这个问题。但是，它会破坏其他设备和视口的布局。

修复是仅针对具有修改后的 css 规则的 IPAD：

@media all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait) {
  .your-container {
    position: absolute;
  }  
}
@media all and (device-width: 768px) and (device-height: 1024px) and (orientation:landscape) {
  .your-container {
    position: absolute;
  }
}

【讨论】：