让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元素

回答

相关问题