從選擇菜單中選擇選項後，Bootstrap 3模式在iPad Safari上消失

我在Web應用程序中具有註冊功能，該功能可讓用戶通過四個步驟將信息添加到網站。當用戶點擊「添加」按鈕時，會出現一個引導模式，用戶從第1步開始。從選擇菜單中選擇選項後，Bootstrap 3模式在iPad Safari上消失

每個步驟都有一個供用戶選擇的選項菜單，每個步驟中填充的數據都依賴於前面的步驟選擇。用戶可以留下一個空白處並繼續，但是他們沒有選擇爲剩下的過程做出選擇。除iPad上的Safari之外，此功能在所有桌面和移動瀏覽器中的預期行爲。

在Safari中，用戶將打開模式，在步驟1中選擇數據，然後轉到步驟2.如果用戶在此下拉列表中未選擇任何內容，則可以繼續執行第3步。但是，如果他們確實做了在步驟2中選擇，模式消失，用戶無法繼續。這隻發生在Safari/iPad/iPhone上。

我曾嘗試在iPad上設置網絡檢查器並在Mac上加載控制檯，但在控制檯中沒有錯誤或其他使用信息。我試圖弄清楚這是否是Safari中的一個bug，或者如果Safari處理來自選擇標記的模式輸入與其他瀏覽器不同。

來源

2015-02-06 JohnR

有類似的問題，引導的模式這個模式中的任何元素後，在iPad上航消失點擊 – OutFall 2015-03-19 17:00:57

可能與：https：//開頭github.com/twbs/bootstrap/issues/14975 – AlecRust 2015-03-23 14:58:10

讓開發人員朋友看一看。他說這個功能：

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} 
     );

這似乎已經解決了這一問題。希望這可以幫助別人！

來源

2015-03-25 17:24:01 JohnR

這似乎是由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'); 
});

來源

2015-12-11 12:12:44 Mati

我有一個類似的問題與在容器內droplist這是在做出選擇消失，這是隻有在實際的IPAD設備上發生（檢查鍍鉻w /設備工具欄與'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; 
    } 
}

來源

2017-04-13 20:11:48 JisuKim82

從選擇菜單中選擇選項後，Bootstrap 3模式在iPad Safari上消失

回答

相關問題