代码之家  ›  专栏  ›  技术社区  ›  brad

jqmodal IE(7或8)在模式加载前闪烁黑色

  •  1
  • brad  · 技术社区  · 15 年前

    这简直要了我的命。在IE7和IE8中,使用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网站下载的完全相同,所以我将省略它,但你可以在我的应用程序上看到它

    有人经历过吗?我不明白他的工作原理,我的也不明白。

    3 回复  |  直到 15 年前
        1
  •  1
  •   animuson    13 年前

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

    改变

    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
  •  0
  •   jimyi    15 年前

    在研究了源代码之后,我找到了一个解决方法。将第41行(jqModal r14中)更改为:

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

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

    我也主持了修复 here 还有一个 demo for IE7 .我不完全确定这一变化会产生什么效果,因为源代码已经缩小(尽管我猜这可能与同时显示多个模态有关),所以一定要对它进行全面测试,确保它不会破坏任何东西。

        3
  •  0
  •   Steve Eisner    15 年前

    我尝试了jimyi的解决方案,但它并不能解决我的问题。以下是我的想法:

    在我的CSS中,我添加了一个新规则

    .jqmOverlay { display: none; }
    

    当我弹出特定的模态对话框时,我会这样做:

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

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

    注意:我还没有测试过它,但是fadeIn操作可能会干扰显示叠加不完全透明的模式对话框。