讓jQuery的模態不會阻止其他UI元素

我使用jQuery的模式來模擬敬酒消息：讓jQuery的模態不會阻止其他UI元素

var modalDiv = $('div.modal'); 
$(modalDiv).modal({'backdrop': false}); 
$(modalDiv).modal('show'); 

runAsync(function() { $(modalDiv).modal('hide'); }, null, 3000);

它運行正常和UI的其餘部分是可見的（因爲我的背景設置爲false）但是屏幕的其他部分不可點擊。

如果我檢查HTML，我可以看到<div class="modal fade in">節點正在覆蓋整個屏幕，並在其餘部分之上。

是否有任何方法可以改變這一點，讓我與UI交互而不清除模態？

的jsfiddle這裏：https://jsfiddle.net/6z42mw13/2/

來源

2015-07-21 Sandy

你能提供一個鏈接嗎？如果沒有看到它，我會猜測你可能會亂搞你的z索引並解決問題。 – RiddleMeThis

看看這裏：https://jsfiddle.net/6z42mw13/2/ – Sandy

試試這個，我不是很確定你想要實現的，但是這種解決方案將集中在屏幕上的模態，並選擇您的項目。

更改模式CSS來這個..

.modal { 
    width: 200px; 
    position: fixed; 
    top: 50%; 
    right: 50%; 
    bottom: 0; 
    left: auto; 
    z-index: 1050; 
    display: none; 
    overflow: hidden; 
    -webkit-overflow-scrolling: touch; 
    outline: 0; 
    height: 80px; 
    margin-right: -100px; 
}

你的問題是不可見的模式仍然存在，覆蓋了整個屏幕，這將解決這個問題。

來源

2015-07-21 02:02:09 RiddleMeThis

這裏是一個例子 - https://jsfiddle.net/J4ck3/yvn78916/1/ – RiddleMeThis

試過這個，我結束了這個：http： //imgur.com/kt0xBmS – Sandy

我無法從截圖中看到發生了什麼。但是我給你的解決方案應該給模板一個固定的寬度和高度，並將其居中在視口中，您可能需要根據您的需要調整這些數字。所提供的屏幕截圖不能告訴我您的問題是什麼。你看看我的小提琴，看看我的解決方案是如何工作的嗎？ – RiddleMeThis

讓jQuery的模態不會阻止其他UI元素

回答

相關問題