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).
http://jqmtest.heroku.com/
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.
