使jQuery模式不阻止其他UI元素

Question

我正在使用jQuery模態來模擬Toast消息：

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

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

它可以正常運行，並且其他UI可見（因為我將background設置為false），但是屏幕的其余部分不可單擊。

如果檢查HTML，則可以看到<div class="modal fade in">節點覆蓋了整個屏幕，並且位於其余屏幕之上。

有什么方法可以更改此設置，讓我在不清除模式的情況下與UI交互嗎？

JSFiddle在這里： https ://jsfiddle.net/6z42mw13/2/

Answer 1

嘗試此操作，我不確定您要完成什么，但是此解決方案會將模式放在屏幕中央，並使您的項目可以選擇。

將模式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;
}

您的問題是看不見的模態仍然存在並覆蓋整個屏幕，這將解決此問題。