1

リンクをクリックすると表示されるモーダルウィンドウを作成しようとしています。最初に、画面全体を埋めるためにマスクが表示され、その後、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 /のスクロールバーを備えたポップアップでさえもそれを持っているので、この望ましくない効果はその時点で回避することはできません。

4

0 に答える 0