jqmodal IE（7 或 8）在模态加载前闪烁黑色
这简直要了我的命。在 IE7 和 8 中，使用 jqModal 时，在加载模态内容之前屏幕会闪烁黑色。我已经设置了一个测试应用程序来向您展示发生了什么。我完全从网站上获取了 jqModal，没有任何更改，没有可能影响我的应用程序的外部 CSS。它在所有其他浏览器（包括 IE6）中都能完美运行。
因此，前两个链接是 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 网站下载的完全相同，因此我将省略它，但您可以在我的应用程序上看到
它 有人经历过吗？我不明白他的工作方式，而我的则不明白。
This is killing me. In both IE7 and 8, using jqModal, the screen flashes black before the modal content is loaded. I've set up a test app to show you what's happening. I've taken jqModal EXACTLY from the site, no changes whatsoever, no external css that could be affecting my app. It works perfectly in every other browser (including IE6).
So, first two links are ajax calls, second is straight up inline HTML. (I originally thought it was the ajax that was affecting it, but that doesn't seem to be the case, I then thought it was slow loading ajax, hence to two differen ajax links)
What's crazy is that the jqmodal site itself works perfectly in IE, no flashing of black, but I can't see what I'm doing wrong. Code is straight forward
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 is exactly the same as the one downloaded from jqModal's site so I'll omit it, but you can see it on my app
Has anyone experienced this? I don't get how his works and mine doesn't.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
我想我已经找到了解决这个模糊问题的方法。
更改
为
并更改
为
I think I figured out a fix for this obscure issue.
Change
to
and change
to
在研究了源码之后，我找到了一个解决方法。将第 41 行（在 jqModal r14 中）从： 更改
为
我还托管了修复 此处以及IE7 演示。我不完全确定这个变化会做什么，因为源代码被缩小了（尽管我猜它可能与一次显示多个模态有关），所以一定要对其进行全面测试，以确保它不会破坏任何事物。
After playing around with the source, I found a workaround. Change line 41 (in jqModal r14) from:
to
I've also hosted the fix here along with a demo for IE7. I'm not entirely sure what that change does since the source is minified (though I'd guess it might have something to do showing multiple modals at once), so be sure to test it out fully to make sure it doesn't break anything.
我尝试了 jimyi 的解决方案，但它并没有解决我的问题。所以这就是我的想法：
在我的 CSS 中，我添加了一条新规则
，当我弹出该特定模式对话框时，我会执行以下操作：
淡入可以覆盖 CSS 规则和规则。黑色闪光被消除。
注意：我还没有测试过它，但 fadeIn 操作可能会干扰显示叠加层不完全透明的模式对话框。
I tried jimyi's solution, but it wasn't fixing the problem for me. So here's what I came up with:
In my CSS I've added a new rule
and when I am popping up that particular modal dialog I do this:
The fade-in works to override the CSS rule & the black flash is eliminated.
Note: I haven't tested it, but the fadeIn action might interfere with displaying a modal dialog where the overlay isn't completely transparent.