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

【问题标题】：jqmodal IE (7 or 8) flashes black before modal loadedjqmodal IE（7或8）在模态加载之前闪烁黑色
【发布时间】：2009-09-22 19:14:51
【问题描述】：

这可要了我的命。在 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网站下载的完全一样，所以我会省略它，但你可以在我的应用程序上看到它

有人经历过吗？我不明白他的作品和我的不明白。

【问题讨论】：

我也遇到过这种情况（但尚未找到解决方案）。当您有 {modal: true} 并且有一个不透明的覆盖时，会发生黑色闪光。 jqModal 网站上的示例都没有这两种情况。

标签： jquery ruby-on-rails jqmodal

【解决方案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;

【讨论】：

【解决方案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。我不完全确定该更改会做什么，因为源已被缩小（尽管我猜它可能需要同时显示多个模态），因此请务必对其进行全面测试以确保它不会中断任何东西。

【讨论】：

太棒了，有机会我会测试一下。 jqModal的来源是多么令人讨厌！我不明白为什么有人会故意编写这样的代码（它在技术上没有被缩小，他只是这样写的）。谢谢，我会带着我的发现回来

【解决方案3】：

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

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

.jqmOverlay { display: none; }

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

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

淡入可以覆盖 CSS 规则并消除黑色闪光。

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

【讨论】：