Question

这是在扼杀我。在IE7和8中，使用jqModal，在加载模态内容之前，屏幕会闪烁黑色。我已经设置了一个测试应用程序来向您展示正在发生的事情。我已经从网站上获取了jqModal，没有任何变化，没有可能影响我的应用程序的外部CSS。它在所有其他浏览器（包括IE6）中都能很好地工作。

http://jqmtest.heroku.com/

所以，前两个链接是ajax调用，第二个是直接内联HTML。（我原本以为它是影响它的ajax，但似乎并非如此，我认为它加载ajax很慢，因此对两个不同的ajax链接）

令人抓狂的是，jqmodal网站本身在IE中完美运行，没有闪烁的黑色，但我看不出我做错了什么。代码很简单

HTML：

<body>
<div id="ajaxModal" class="jqmWindow"></div>
<div id="inlineModal" class="jqmWindow">
  <div style="height:300px;position:relative;">  
    <p>Here's some inline content</p>
    <a href="#" onclick='$("#inlineModal").jqmHide();return false;' style="position:absolute;bottom:10px;right:10px">Close</a>
  </div>
</div>
<div style="width:600px;height:400px;margin:auto;background:#eee;">
  <p><a href="/ajax/short" class="jqModal">Short loading modal</a></p>
  <br />
  <p><a href="/ajax/long" class="jqModal">Longer loading modal</a></p>
  <br />
  <p><a href="#" class="jqInline">inline modal</a></p>
</div>    
</body>

使用Javascript：

<script type="text/javascript">
  $(function(){
    $("#ajaxModal").jqm({ajax:'@href', modal:true});
    $("#inlineModal").jqm({modal:true, trigger:'.jqInline'});
  });
</script>

CSS与从jqModal网站下载的CSS完全相同，所以我会省略它，但你可以在我的应用程序上看到它

有没有人经历过这个？我不了解他的作品和我的作品。

Answer 1

我想我找到了解决这个模糊问题的方法。

更改

o=$('<div></div>').css({height:'100%',width:'100%',position:'fixed',left:0,top:0,'z-index':z-1,opacity:c.overlay/100});

到

o=$('<div></div>').css({height:'100%',width:'100%',position:'fixed',left:0,top:0,'z-index':z-1,opacity:c.overlay/100}).hide();

并更改

h.o=(o)?o.addClass(c.overlayClass).prependTo('body'):F;

到

h.o=(o)?o.addClass(c.overlayClass).prependTo('body').show():F;

Answer 2

在玩完源后，我发现了一个解决方法。更改第41行（在jqModal r14中）：

if(c.modal) {if(!A[0])L('bind');A.push(s);}

到

if(c.modal) {A.push(s);}

我还托管了修补程序here和demo for IE7。我不完全确定这个改变是什么，因为源被缩小（虽然我猜它可能有一些东西可以一次显示多个模态），所以一定要完全测试它以确保它不会破坏任何东西。

Answer 3

我尝试了jimyi的解决方案，但它并没有为我解决问题。所以这就是我想出来的：

在我的CSS中，我添加了一条新规则

.jqmOverlay { display: none; }

当我弹出那个特定的模态对话框时，我这样做：

$("#pleaseWait").jqmShow();   // show the modal dialog
$(".jqmOverlay").fadeIn(10);  // very quick fade-in

淡入功能可以覆盖CSS规则＆amp;黑色闪光被消除了。

注意：我还没有测试过，但是fadeIn动作可能会干扰显示叠加层不完全透明的模态对话框。

jqmodal IE（7或8）在加载模态之前闪烁黑色

3 个答案: