リンクをクリックすると表示されるモーダルウィンドウを作成しようとしています。最初に、画面全体を埋めるためにマスクが表示され、その後、jQueryのfadeIn()メソッドを使用してモーダルウィンドウが表示されます。FF、Opera、Safari、さらにはIEでも完全に機能しています(いくつかのマイナーなコメントがあります:)。ただし、問題は、視覚化プロセス中に、Chromeのスクロールバーが完全に表示される前に、黄色、赤、黒などのさまざまな色で表示されることです。これを回避する方法はありますか?
私のHTMLコードは次のとおりです。
<a href="#dialog" name="modal">Simple Window Modal</a>
<div id="dialog">
<div id="file"><div style="height:500px;"></div></div>
</div>
<div id="mask"></div>
jQueryコード:
$().ready(function() {
$('a[name=modal]').click(function(e) {
e.preventDefault();
var id = $(this).attr('href');
var maskHeight = $(document).height();
var maskWidth = $(window).width();
$('#mask').css({'width':maskWidth,'height':maskHeight});
$('#mask').fadeIn(500);
$('#mask').fadeTo("fast", 0.9);
$('#mask').show();
var winH = $(window).height();
var winW = $(window).width();
$(id).css('top', winH/2-$(id).height()/2);
$(id).css('left', winW/2-$(id).width()/2);
$(id).fadeIn(500);
});
});
結果:
GoogleChromeの黒いスクロールバーhttp://www.strangerstudio.net/demo/chrome-scrollbars-1.png
いくつかのコンテンツ:
GoogleChromeの黄色のスクロールバーhttp://www.strangerstudio.net/demo/chrome-scrollbars-2.png
どうもありがとう!
編集:おそらく、chrome:// chrome / settings /のスクロールバーを備えたポップアップでさえもそれを持っているので、この望ましくない効果はその時点で回避することはできません。